CODEWITHSUNDEEP
cssresponsive-designmedia-queries
user1199795
user1199795

Reputation: 63

Why are these media queries not overriding each other?

I have the following media queries set up in my stylesheet, cna anybody tell me why the bottom query doesn't override the first query?

@media screen only and (max-width:992px) {
  .some-element {float:left;}
}

@media screen only and (max-width:768px) {
  .some-element {float:none;}
}

Upvotes: 0

Views: 692

Answers (2)

Asaf David
Asaf David

Reputation: 3297

You wrote the media query in the wrong order, the only (or 'not') should come right after the '@media'. Like this:

@media only screen and (max-width:992px) {
  .some-element {float:left;}
}

@media only screen and (max-width:768px) {
  .some-element {float:none;}
}

Upvotes: 2

John Bupit
John Bupit

Reputation: 10618

Try @media screen instead of @media screen only. The bottom query does override the top one.

@media screen and (max-width:992px) {
    .some-element {
        float:left;
        background-color: #f00;
    }
}
@media screen and (max-width:768px) {
    .some-element {
        /** See how the background-color property is overriden */
        background-color: #000;
        color: #fff;
    }
}
<div class="some-element">Hi. I am floating.</div>

<h1>I am a block element</h1>

Upvotes: 2

Related Questions