Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

Amy Braswell
Amy Braswell
3,323 Points
Posted by Amy Braswell
Amy Braswell
3,323 Points

Do these break points change with retina screens? I can't make my browser window small enough to activate a 480px query.

Just wondering what the industry standard is for break points with retina displays available on the market. I can't get any queries much smaller than 960px to register when testing on my Macbook Pro.

Are 960px and 480px still used or is there a resource available for common break points to address when designing a site?

3 Answers

Saskia Lund
Saskia Lund
5,673 Points
Saskia Lund
Saskia Lund
5,673 Points

Additionally to Danielle's suggestion you can use a tool like http://quirktools.com/screenfly/ to simulate various and custom window sizes and devices.

Also check if you are using the meta tag viewport in your head element. You might want to get familiar with it when developing responsive websites :)

Danielle Palombo
seal-mask
.a{fill-rule:evenodd;}techdegree
Danielle Palombo
Front End Web Development Techdegree Student 10,421 Points
Danielle Palombo
.a{fill-rule:evenodd;}techdegree
Danielle Palombo
Front End Web Development Techdegree Student 10,421 Points

If you use Chrome Dev Tools, you can click on the phone icon in the upper lefthand corner and choose how to view it (either choose a screen from the dropdown menu or type in your own dimensions).

Amy Braswell
Amy Braswell
3,323 Points
Amy Braswell
Amy Braswell
3,323 Points

Thank you! Both answers make a lot of sense.

I recently found the phone icon in the Developer tools but thanks for pointing it out as it has been a big help.

I'll also check out quirktools and look into the meta tag viewport in the head element. I'm thinking it was described as a command to ensure that the browser doesn't enlarge the site as it loads in... I'll make a note to revisit it so I can understand better!