Why does a media query with a smaller min-width overwrite a larger one?

css, media-queries

Solution

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:

- Why does the order of media queries matter in CSS?

- What are the rules for CSS media query overlap?

- CSS specificity, Media Queries and min-width

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; }
}

Problem

I'm trying to understand why the `min-width: 600` media query below would overwrite the `min-width: 768`media 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. Thanks for any help.

Original source

Related problems