CODEWITHSUNDEEP
javascripthtmlcssmedia-queries
Mike
Mike

Reputation: 3418

Why does my media query not work?

My CSS looks like something below:

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

when I resize the browser to iphone width, I dont see body get red background. Do you guys know what is happening. I also tried @media (max-width:480px)

FYI I have meta view post tag also set up as:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" name="viewport">

Upvotes: 1

Views: 259

Answers (2)

Rchristiani
Rchristiani

Reputation: 444

You have to set it to this 

@media only screen and (max-width:480px) {

    body{background: red;}

}

EDIT Forgot to explain my changes.

I removed your extra brackets that were inside the media query. But most importantly changed it so that it is only targeting the screen(as stated is optional). And changed max-device-width to max-width as you have already stated in your meta tag that the width should be the value of the device width.

Upvotes: 2

Quentin
Quentin

Reputation: 944568

max-width is right (max-device-width would be the screen size, not the window size) but you have extra braces. Take them out:

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

Upvotes: 2

Related Questions