11

I'm trying to understand why the min-width: 600 media query below would overwrite the min-width: 768media query.

I know that 600px comes later in the CSS file which could be a reason, but surely only one should only be applied if the screen size is either 600 or 768?

I'm looking into media query documentation now, but have yet been able to explain this.

enter image description here

Thanks for any help.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Dano007
  • 1,872
  • 6
  • 29
  • 63
  • This is not a responsive design nor media-query issue. This is the nature of cascading stylesheet. The latter overrides the prior. – Hashem Qolami Feb 28 '15 at 15:01

4 Answers4

12

I know that 600px comes later in the CSS file which could be a reason

This is usually the reason, aside from unrelated authoring mistakes or, worse, browser bugs. Anything that is greater than or equal to 768px is, by necessity, also greater than or equal to 600px, so they both have to match.

See the following related questions for more information:

but surely only one should only be applied if the screen size is either 600 or 768?

That's not true; @media rules are completely independent of one another. It doesn't make sense for @media rules to be exclusive, in particular when you consider that media queries can consist of any combination of media features.

For example, what should happen in this case when the media is (width: 600px) and (height: 300px)? (The correct behavior is that every rule is applied, with the last one taking precedence, because there is no other way for the UA to account for both width and height when evaluating the queries.)

@media {
    body { background-color: white; }
}

@media (min-width: 600px) {
    body { background-color: red; }
}

@media (min-width: 300px) and (max-height: 300px) {
    body { background-color: yellow; }
}

@media (max-height: 600px) {
    body { background-color: blue; }
}
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

Both of yours media query have no below limit. That mean both will be applied to from 0px to either 600px or 768px.

So when you are below 600px both will be load but only one will got applied. The order of Media query is the key. The one that after will override the rules before it.

If you want to specific it to be less confusing. Just put the limits/range for it like:

@media (min-width: 600px) and (max-width: 768px){
  ...
}
Linh Pham
  • 3,005
  • 23
  • 34
0

The 600px rule applies to anything that's 600px or larger. If you don't want the 600px override the 768px, you either make the 600px come before the 768px or change the rules to work using max-width instead.

imelgrat
  • 2,407
  • 1
  • 12
  • 17
0

I had the same issue. In my case use the decimal values did the trick. If match both of breakpoints but one value is more specific(has more decimal place), it overwrite the simplier one.

Styles preview

If one breakpoint use 33.3% then i need 25.0% in another one.

Gynteniuxas
  • 7,035
  • 18
  • 38
  • 54
yavoo
  • 1
  • What indicates that the precision of the value determines precedence? I'd assume precedence is defined by the specificity of the CSS selector, not the value of a property. – showdev Aug 30 '16 at 21:47