Question

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">

Answer 1

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