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
JAE IN KIM
Front End Web Development Techdegree Student 6,794 Pointsif there are 3 media queries( 320px, 769px, 1024px) and applied 70%width at 769px. then that value affects which????
my question is like this: @media (min-width:320px) {width: 50%} @media (max-width:769px) {width: 70%} @media (max-width:1024px) {} if it is like this, then the value only affects right at 769px? then the range for 769 px becomes from 321 to 769px automatically? and also can I mix up max and min-width both like the example? as the min-width is 320px, then below 320px doesn't get any value? and if I want to make it more clear, do I need to make it like this: @media (min-width:200px) and (max-width:320px) {width: 50%} @media (min-width: 321px) and (max-width:769px) {width: 70%} @media (min-width: 780px) and (max-width:1024px) {} thank you!!
2 Answers
Steven Parker
231,269 PointsThese examples are not valid CSS since the rules inside the media queries don't have any selectors.
But correct-syntax rules in the "max-width:769px" query in the first example would still be in effect on windows sizes less than 320px. For sizes between 320 and 769px, ruiles in all three queries would be active, and any conflicts would be resolved by the "cascade" (last one wins).
abdelhakim qabli
1,282 Pointsif the media query set tp max-width then it affects the width that you entered and less for example if max-width is 720px then the query will affect 720px and 480px 360 px and so on but not 1080px on the contrary if you set the media query to a min-width for example 360px then it will not affect 240px or anything less than 360px only 360px and above like 480px and so on