1

Does anyone know why the second media query (401 to 750) is not applying?

#mydiv {color:#FF0000;}
@media screen and (max-width:400px){
#mydiv {color:#33CC33;}
}
@media screen and (min-width:401px and max-width:750px){
#mydiv {color:#000;}
}

<div id="mydiv">
testing text color with media queries
</div>

http://jsfiddle.net/xpnGh/2/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
4thSpace
  • 43,672
  • 97
  • 296
  • 475

1 Answers1

3

The min-width and max-width descriptors need to be in their own set of parentheses, with the and outside them similarly to when you place it between screen and the first descriptor, like so:

@media screen and (min-width: 401px) and (max-width: 750px)
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks. By the way, does the media query always have to come last? In other words, if I take the default rule #mydiv {color:#FF0000;} and put it at the bottom, it overrides the queries. – 4thSpace May 31 '13 at 15:14
  • 1
    @4thSpace: That's because the media rules don't affect specificity in any way, so the browser goes by whatever order you placed the rules in. See http://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap/13611538#13611538 and http://stackoverflow.com/questions/10306670/css-specificity-media-queries-and-min-width/10322199#10322199 for in-depth explanations. – BoltClock May 31 '13 at 15:16