Why Does a Media Query with a Smaller Min-Width Overwrite a Larger One

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

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

why does a higher max-width in media queries overwrite a lower max-width?

you have to change the order of your media queries...

in your case, the smaler the max-width, the lower it should be in you css

because max-width: 1200px is also true and comes later, so it gets overridden (look at the line count! :) )

Changing media queries from min-width to use max-width to avoid overriding?

You have your max- vs min-width mixed up.

max-width applies anywhere under the width set and min-width applies anywhere above

@media (max-width: 768px){
    span.crumbsTxt {
     font-size: 14px;
   }
}

DEMO

EDIT:
You have two options for ordering your media queries:
Option one (as you note above), order them largest to smallest as it will always apply the most recently declared styles first.
Second, make the media queries exclusive blocks:

@media (min-width: 320px) and (max-width: 768px){
    span.crumbsTxt {
     font-size: 14px;
   }
}

DEMO 2

Lets walk through your media-queries as an example:
(Lets assume we are on a screen size of 1000px)

 @media (max-width: 1824px) {} /* this media query will apply because the screen is less than 1824px */

 @media (max-width: 1250px) {} /* this media query will then apply (on-top-of the first media query) */

 @media (max-width: 992px) {} /* this media query will not apply because the screen size is greater than 992px */

 @media only screen and (max-width: 767px) {}  /* this media query will not apply because the screen size is greater than 767px */

If you want to avoid that cascading effect, you could modify your media queries like this:

 @media (max-width: 1824px) and (min-width: 1251px) {} 
 @media (max-width: 1250px) and (min-width: 993px) {} 
 @media (max-width: 992px) and (min-width: 768px) {} 
 @media only screen and (max-width: 767px) {}

*note, with this exclusive version, the order of the media queries is irrelevant

media-query specificity - why is the largest style used when using max-width media queries?

Because 480 is less than the last max-width of 1024. CSS always uses the last valid value, so you need to order max-width media queries from largest to smallest to get the intended value.

jsbin

.container {
    background: none;
}

@media screen and (max-width: 1024px) {
    .container {
        background: blue;
    }
}

@media screen and (max-width: 768px) {
    .container {
        background: white;
    }
}

@media screen and (max-width: 480px) {
    .container {
        background: red;
    }
}

Media Queries not respecting size

before starting make sure you have following view port meta in your head section.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

After this
please note following

@media (min-width: 501px) { /** CSS HERE **/ }
This will work only on screen size larger than 501 pixels wide.

@media (max-width: 500px)
This will work only on screen sizes smaller than 500 pixels wide.

CSS specificity, Media Queries and min-width

I'd expect when I'm in resolutions of 600px and above to get a 2.2em h2, but instead I get 1.7em.. In my Dev tools I see that the 2.2em declaration is there, but the other one takes precedence.. It doesn't make sense!

It makes sense. If the media fulfills min-width: 600px, then it should also fulfill min-width: 320px; in other words, anything that's at least 600 pixels wide is also at least 320 pixels wide, because 600 is greater than 320.

Since both media queries evaluate to true, the rule that occurs last takes precedence in the cascade, making your code equivalent to this:

h2 { font-size: 2.2em; }
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }

That explains why the 2.2em appears in your developer tools but doesn't take apparent effect.

The easiest fix is to switch your @media blocks around so your rules cascade in the correct order:

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

Higher resolution media query overrides lower resolution media query

@media(max-width: 640px) applies to all sizes 640px and below, so the styles specified in this media query will also be applied to screen widths of 320px. Media queries do not increase the specificity of the CSS rules within. Because your @media(max-width: 640px) media query comes after @media(max-width: 320px), the rules or equal specificity in the larger media query will override those in the smaller media query.

The simplest fix would be to order your media queries from the largest screen size to smallest.

If you need more control, you can limit your media query to screens within a range of sizes using a combination of min-width and max-width.

@media (min-width:320px) and (max-width: 640px) {
}

Media queries not working and also overriding regular css when It shouldn't

1.

@media only screen and (min-height: 768px) and (min-width: 1024px) --- perhaps your window/browser height is Below 768px

2.

The ! IMPORTANT -flag often causes problems in code

3.

Your code in media-queries.scss should be nested in the same way
regular.scss is nested too

---

Related Topics