CODEWITHSUNDEEP
cssmedia
Eric Diviney
Eric Diviney

Reputation: 327

CSS3 Media query isnt working?

So I'm trying to take my aim at responsive design, and saw this "simple" media query that should target all iPhones. Tried it out, tested it in Firefox AND Chrome and neither turned out successfully. I used the new "Responsive Design" tool in firefox, and that didnt work, so then i tried just resizing the broswer window which did not work either. I also tried resizing browser window in chrome and that proved to be unsuccessful as well! Any help is appreciated! First is my HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>CSS Media Queries</title>
        <link rel="stylesheet" type="text/css" href="test.css" media="screen">
    </head>
    <body>

    <p>Hello there, if this is blue, the responsive css is not working, however if it is red, then it is working!</p>
    </body>

</html>

And now for my CSS:

@media only screen and (max-width : 320px) {
body{
    color:red;
    }
}

body{
    color:blue;
}

Upvotes: 1

Views: 174

Answers (1)

Adrift
Adrift

Reputation: 59779

It's not working due to the nature of the cascade, as your @media rule precedes your regular body rule, causing it to be overridden as they have the same specificity (one type selector - body). You just have to switch the order around, e.g.

body {
    color:blue;
}    

@media only screen and (max-width: 320px) {
   body {
   color:red;
   }
}

http://jsfiddle.net/Adrift/sCWWD/2/

Upvotes: 3

Related Questions