Only First Media Query Working

Only one media query working

The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:

#wrap {
        background: #F00;
}

#wrap {
        background: #224466;
}

Switching the order should fix the problem:

@media only screen and (max-width: 500px) {
    #wrap {
            background: #224466;
    }           
}

@media only screen and (max-width: 100px) {
    #wrap {
            background: #F00;
    }   
}

Only first media query working

Nevermind, figured it out.

There somehow was a hidden character in the CSS. This is odd considering that I typed everything else myself, maybe Dreamweaver put it there? A glitch maybe? Anyway, copying it over to MS Word and pasting it back into Dreamweaver fixed it.

P.S Thanks for your help!

Only first two media queries works in CSS. Rest is being ignored

Add the meta tag to your html with initial-scale set to 1.

<meta name="viewport" content="width=device-width, initial-scale=1">

Only one media query is working, rest is ignored

Remove the "all and"s:
http://jsfiddle.net/C3R9J/

 @media (max-width:700px){
      body{
        background:red;
      }
 }

 @media (max-width:560px){
      body{
        background:blue;
      }
 }

Take a look at Example 5 this link to WC3:
http://www.w3.org/TR/css3-mediaqueries/

if the media type is not explicitly given it is ‘all’.

Only one media query is working but i do not know why

I just found out that it is indeed not due to the code but to chrome. I have tried all the time to check with the device toolbar if I was doing it right. Somehow it doesn't work with that .. but if I make the whole page smaller it will work.
Thank you for all the suggestions and help

Resolved this problem by adding this to my head:

<meta name="viewport" content="width=device-width">

Media query only picks up first class

Use max-width:600px instead of max-device-width:600px - most mobile devices have a higher screen resolution (2 to 3 times higher than the CSS width) - a max-device-width:600px on a device with pixel-ratio 1:2 would result in being applied only below 300px (CSS) width, which is less than most smartphones have nowadays.

The rule in the media query does apply if you change that.

And to get rid of the small whitespace at the left, add body { margin: 0; } to reset the default margin of the body.

https://jsfiddle.net/24cyrjt0/

Only first media query is working which is above 851px but other media queries not working

I believe your media queries are well crafted, but you need to add spaces between
the and.

Like so:

@media screen and (min-width:601px) and (max-width:850px)

---

Related Topics