Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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!