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
Teacher Russell
16,873 Pointsmin-width and max-width in media queries...
In the media queries of the first site we built on Treehouse, we had break points set at @media screen and (min-width:480px), and (min-width:660px).
In this site we set them at (max-width) and 768px/1024px. What is the reason for choosing max or min, and why those sizes specifically, and shouldn't it be less than 1024px if the screen is 1024px? ALSO confused about why the padding was added to .wildlife in the first query, when I thought it was only a problem in the smallest screen.
4 Answers
Michael Hulet
47,913 Points@media(min-width: 480px) will cause the media query to apply to all screen sizes equal to or wider than 480px, but @media(max-width: 480px) would cause it to apply to all screen sizes equal to or narrower than 480px. As for the different sizes, you should only include a media query when your design starts to break. The first website we made is a different one from the 2nd, with a different design that breaks at different points, so it has media queries for different sizes at the points where they each begin to break
Brady Borkowski
7,495 Pointsyou use min and max because different devices have different sized screens. Your laptop screen will have a much larger width than say, a smartphone. We play around with the min/max-widths so that the website looks pretty and remains functional whether someone is using a smartphone or a large desktop screen.
Teacher Russell
16,873 PointsI mean, specifically those numbers, and when to use max over min. You doing this for all devices everywhere, so why wouldn't we use basically the same breaking points, etc. Exactly why is he choosing 1024? Someone told me different sights demand different breaking points. I was asking why those numbers, and why max instead of min?
Mariela Napoles
13,434 Points1024px etc are the sizes of the screen of different devices. Ive read that 992px = wide screen, 768px = normal screens, 600px = narrow screens, 320px = mobile screens. We cant say that we will use max-width all of the times and just ignore min-width, in fact we can use both. We use max-width for example, max-width: 320px, to say that a certain rules must affect from 0px UNTIL 320px. But if you use min-width:320px, the rules will affect your targeted element from 320px until it reach the next breakpoints you made, like for example, max-width: 600px. Hope this helps
Teacher Russell
16,873 PointsEven hearing what I mostly understand said it slightly different ways by different people definitely helps. In the lessons, some extremely simple things are over-explained, and seemingly very important less obvious things are sometimes glossed over quickly. I've had a hard time getting things like this out of any videos I've watched. I think showing how someone approaches building a website from the first sketch on a piece of paper, to the first calculation of the size of a div, margins, and padding. We're taught how to write media queries and what they do, but not so much the first conception of them for the site we're building. When and why exactly, those precise numbers were picked for that site that we're building for that lesson. I feel I'm shown what needs to be done but not necessarily in the order or method that the teacher/designer got there with. Thanks so much for your help!
Yoke Lee
2,871 PointsTeacher Russell If you haven't found your answer already.... the numbers 1024, 768, 360, 600, 990 are sizes for popular viewports, based on the devices. For example 768 is iPad portrait, and 1024 is iPad landscape. Check out this slightly outdated (but still somewhat relevant) chart. http://gs.statcounter.com/#desktop+mobile+tablet-resolution-ww-monthly-201608-201610-bar
Maybe your question comes from Mobile First approach that concentrate the design on mobile view and use min-width to cater for larger viewport. Which should be the ideal. Max-width is used to actually design the mobile because we don't want our 320 design to be applied to sumo Mac screen i.e. 2000px (although that would be very hillarious imho).
Hope that helps.
Teacher Russell
16,873 PointsTeacher Russell
16,873 PointsSo, we're expanding and contracting the page in dev tools to see how big it is when things go ugly? I still don't see why choose min or max. Also, that padding issue. He sees the problem in the smallest screen, and changes the padding in the largest. Thanks!