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
Elinor Armsby
13,566 PointsWhy use a min-width: 320px in the CSS?
I thought I made a mistake in the step of adding media queries to the CSS file because when the screen is quite small the menu ul reappears. Then I realized it's because I was resizing the browser window smaller than 320px. Why use that range? Wouldn't it be better to just apply the style rule to all sizes below 568px and not just between 320px and 568px?
Ivo Vieira
5,443 PointsI have exactly the same doubt. Shouldn't we aim always for responsive design and shouldn't this mean that we shouldn't be worried if the user has a iPhone 5 or other kind of mobile or, in this case, is on the browser? I think it makes a bit more sense that the menu keeps hidden bellow 320 px and until the user shrinks the browser until the minimum with it can be shrunk. In that case and editing the media query, shouldn't we do just the following?
"@media (max-width: 568px) { #menu ul { display: none; } }"
instead of the original:
"@media (min-width: 320px) and (max-width: 568px) { #menu ul { display: none; } }"
2 Answers
Adrien Contee
4,875 PointsIvo is correct. I scratched my head when I saw him use the (min-width: 320px) media query .... that's just idiotic in my opinion. We don't want the menu showing up on small screens but anything less that 320 is ok? lol
Adam Santana
11,273 Pointsok, i am glad to see that we are all in the same page.
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Pointsshyarkhalil
Front End Web Development Techdegree Graduate 17,762 PointsHi Elinor,
The main reason to set CSS media queries between 320px and 568px is to make site works on small screen dimension resolution for mobile that starts from 320px to 568px. For instance, an iPhone 5 screen resolution is 320 x 568 points. There is no reason to set it for example on 100px because there is no screen dimension resolution starting from that point. And the main reason to resize the browser window in this video is just to simulate the mobile screen size.
Hope this helps.