Reputation: 3418
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
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
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