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
Brandon Lewis
1,657 PointsMin-width media query not working but max-width is
Hey guys.
So very odd my min-width media query is not working yet max is.
When I set the width 480px with a background color of red , the color is set but doesn't go away when scaled to a larger size.
Here is my code:
@media screen and (min-width: 480px) { body { background: red; } }
3 Answers
Aurelian Spodarec
10,801 PointsYou need max width to prevent it going other color after 480px.
Min with means that e.g. if we want something to change at 800px and up, we want min-width, but if we want anything form 1 to 800px, we want max-width at 800 so it's stops at 800 as it's 'max' width.
Hope this helps.
Damien Watson
27,419 PointsThe min-width is the minimum width that this style is applied. So with min-width:480px, it will set it from 480px and upwards. If you want it to be only applied up to 480px, you should use max-width.
@media screen and (max-width: 480px) {
body { background: red; }
}
Brandon Lewis
1,657 PointsThanks for replying!
when I add that code in, the background changes to red but it stay red on all screen width. No change is happening when scaled.
It leads me to believe that the media query is simply not working for some reason.
Damien Watson
27,419 PointsYou have no declaration to change to any other colour, so it stays red. This example should clearer it up for you:
@media screen and (max-width: 480px) {
body { background: red; }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
body { background: green; }
}
@media screen and (min-width: 769px) {
body { background: blue; }
}
Adrian Dusza
4,364 PointsHave you set any background color in your CSS before breakpoint?
Brandon Lewis
1,657 PointsBrandon Lewis
1,657 PointsThanks for replying!
So I actually want a min-width of red and as you scale it change.
The problem is, when I add a min-width, the background color changes to red, but it stay red on all screen width. No change is happening when scaled.