CODEWITHSUNDEEP
htmlcssresponsive-design
HTMLNoob
HTMLNoob

Reputation: 821

Media Query problems

Ok, I have encountered a problem while experimenting with media queries. I'm wondering if any of you could possibly help me on this issue. The purpose of this code is simple. When the screen size is above 600px the banner should not be visible and when the screen size is below 600px the banner should appear.

@media (max-width: 600px) {
  .banner {
    display: none;
  }
}
<header class="banner">
  <h1>Banner</h1>
  <p>Banner Content</p>
</header>

Now as you run the code above(I assume you just did) there is nothing wrong.

Ok, now I will add similar code.

@media (max-width: 600px) {
  .banner {
    display: none;
  }
}
.banner {
  display: block;
}
<header class="banner">
  <h1>Banner</h1>
  <p>Banner Content</p>
</header>

Outside of the query is a style that contradicts the style given in the media query. Now what I believe to know about media queries. The styles within the query should override any other existing styles just as long as the screen-size condition is met.

If this is normal, what would be the best way of having the style within the media query override the other existing styles outside the query.

Upvotes: 1

Views: 106

Answers (2)

Martin
Martin

Reputation: 22760

(Assuming all else is equal) Styles are activated in the order of precedence that they're encountered, unless encased in what amounts to an IF query, such as a media query. 

.banner {
  display: block;
}

So the above CSS will always display, no matter what other IF statements come before the rule itself. Which is not what you want.

Solutions:

1) You instead need it to be encapsulated within its own media query to only show when ABOVE 600px so:

@media (min-width: 601px) {
  .banner {
    display: block;
  }
}

2) You place all your media queries in reverse order, so all at the bottom of (last in) your CSS file(s), so the media qualifiers are read AFTER the standard rules.

EDIT:

As Sean qualifies in comments, there are various more specific CSS selections, rather than just the order of appearance in the file, that can bend which rules take precedent over others. The order of appearance works in this case and works when the subject rules are all equal (such as all direct classes only) but please note that there will be other CSS rule instances that can complicate the issue. This answer is not intended for more complex CSS rule ordering.

Upvotes: 1

Johannes
Johannes

Reputation: 67738

It depends on the order of the rules: Every rule that comes AFTER a rule in a media query (for the same class or ID) will override it.

In your case the "general" rule for .banner is below/after the media query, so it overrides the rule in the media query. You have to write the general rules first, followed by the media queries.

Upvotes: 1

Related Questions