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 How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Really, where can you find a smartphone screen lower res than 480 px in landscape mode in 2014? Seems strangely low.

Not sure why we are setting a min-width to 480 px, that is lower than vga...

2 Answers

Hi Joel!

While not a lot of phone modern phone displays go to a resolution this low you must remember that some people don't often change phones and a lot of older phones certainly use a resolution similar to 480px.

Maybe he meant to say 480 width for smartphones in portrait was at one time common, bec in the video we are adjusting the window to a portrait view when trying to replicate what the site will look like on a smartphone.

Out of 31 screen resolutions listed at http://bit.ly/MtdamL , only 2 are under 480 for landscape mode, QVGA and WQVGA, and there are only a very few old smartphone models listed.

My real question is how useful is it to use screen resolution to attempt to distinguish smartphones from tablets from laptop/desktop monitors?

Smartphones now boast resolutions of up to 2560×1440 at 515 ppi, and soon even 4K, and even less expensive and older models usually have a width even in portrait of over the 660 min the video sets as a break point to optimize for tablets.

The @media screen and min-width feature is very cool (I love these treehouse courses in general so far, so informative!) but there must be a more accurate way to query whether the device being used to view the website is a mobile device in portrait mode, a desktop in landscape mode, etc, I am guessing maybe by determining which operating system is being used.

Use bootstrap