CODEWITHSUNDEEP
htmlcss
user2798091
user2798091

Reputation: 606

Multiple media queries in css not working

I have multiple queries in my stylesheet where the code@media only screen and (min-width : 768px) and (max-width : 1024px) { } works perfectly fine but under it I have @media screen and (min-device-width : 176px) (max-device-width : 360px) {} does not work.

CSS:

@media only screen and (min-width : 768px) and (max-width : 1024px) { 
body {background: red; } }


@media screen and (min-device-width : 176px) (max-device-width : 360px) {
body {background: green; } }

Upvotes: 9

Views: 39319

Answers (4)

Fernando Triviño
Fernando Triviño

Reputation: 1

I found the solution. You have to make 2 CSS files, in the first code the first media query and in the second write yout second media query code. I know it is an elegant way to do it but it works.

Upvotes: -2

Adriano Resende
Adriano Resende

Reputation: 2619

For multiple width for same style, use ,:

@media (max-width: 360px), (max-width: 768px) {

    /* style goes here */

}

Upvotes: 7

Nix
Nix

Reputation: 58542

You're missing the AND between (min-device-width : 176px) (max-device-width : 360px).

@media screen and (min-device-width : 176px) and  (max-device-width : 360px) {
    body {background: green; } 
}

The other issues here is you are using min-device-width.(referring to the resolution of the device vs browser width) which is what @NoobEditor is saying below.

Are you doing that on purpose? If not you should be using min-width && max-width

@media screen and (min-width : 176px) and  (max-width : 360px) {
    body {background: green; } 
}

Upvotes: 24

NoobEditor
NoobEditor

Reputation: 15891

check this fiddle, change the browser width to see the the media query in action

@media screen and (max-width : 1500px) {
    body {
        background: #000;
        border-top: 2px solid #DDDDDD;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}

This fiddle works fine, but if you change the order of the media queries it wont work...try it for yourself!

CSS always selects the last style that was declared if multiple style are found for an attrib.

for e.g : 

@media (max-width: 1024px) {
  body {
    background: black;
  }
}

@media (max-width: 768px) {
  body {
    background: white;
  }
}

for 765px ( since both m.q cover this width ) color selected would be white

Upvotes: 10

Related Questions