Css Specificity, Media Queries and Min-Width

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

Why media queries has less priority than no media queries css

This has to do with the way the Cascade in CSS works. When two conflicting rules target the same element, the browser uses the rules of the cascade to determine which one to apply.

Selector specificity is the most important part of this: styles with a more specific selector will override those with a less-specific selector... but
media queries do not change the specificity of your selectors. This means that your two selectors have the same specificity. When that happens, the one appearing later in your stylesheet will override the earlier one.

Your easiest and best fix is to swap the order of your rulesets:

.logo img{
    width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}

This way, the media query comes later, and will override the earlier rule when the media query matches the viewport size.

If that's not an option for some reason, you will need to increase the selector specificity of the rule you want to win. Changing it to the following would work:

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }

}
.logo a img{
    width: 100%;
}

This way the selector now has two tags and a class, or [0,1,2], making it more specific than one tag and one class, or [0,1,1] (the zero in each of those indicates no ids, which are highly specific).

Do not use !important to fix specificity issues like this. If you need to override the style again elsewhere, the only way to do it is to add another !important. This will eventually lead to !importants all over the place, and then you will still need to deal with the specificity of the selectors.

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 query css responsive

just reorder your media queries. Otherwise the max-width:375px over rides max-width:320px

.p {
  font-size: 50px;
  background-color: blue;
}

  @media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}


  

<p class="p">This is for tests</p>

@media screen and (max-width: 425px) {
    
}

@media screen and (min-width: 426px) and (max-width: 768px) {
        
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    
}

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

.wrapper .inner .left .text .sample-text {
    color: red;
}

@media screen and (max-width: 800px) {
    .wrapper .inner .left .text .sample-text  {
        color: green;
    }
}