Multiple media queries in css not working

Question

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

Answer 1

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