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
Jack Duong
6,324 Pointsmedia query cascade question
why is it when I type up this code, the second media query overrides the first '''css @media screen and (min-width:660px){ body{ background:darkgreen; }
}
@media screen and (min-width:480px){ body{ background:navy; }
} ''' The background color only changes to navy.
But when the order is reversed: '''css @media screen and (min-width:480px){ body{ background:navy; }
@media screen and (min-width:480px){ body{ background:darkgreen; } ''' both media queries work with their respective widths.
2 Answers
Laura Cressman
12,548 PointsThat's the idea with cascading style sheets. The property that is set last, when applied to the same selector, will determine how the final result looks. For example, if you have this CSS:
body {
background: green;
background: navy;
}
The background will appear navy. When you have cascading media queries, and the min-width of 480px is listed second, remember that any screen that is at least 660px wide will also be at least 480px wide. This means that the 480px CSS declaration will override whatever you wrote before. In your case, the background will be navy. You need to put the bigger width second, so that it will be applied last if the width is at least 660px, and not overridden by the 480px media query.
Jack Duong
6,324 PointsThanks! That was a very clear explanation.
Laura Cressman
12,548 PointsYou're welcome :)