Why does the order of media queries affect which style is applied?
@media screen and (min-width:660px){
body{
background:darkgreen;
}
}
@media screen and (min-width:480px){
body{
background:navy;
}
}
When the code is written in this order, only the navy background color is displayed.
However, if we reverse the order:
@media screen and (min-width:480px){
body{
background:navy;
}
@media screen and (min-width:660px){
body{
background:darkgreen;
}
Both media queries apply their styles correctly based on the width specified.