the same @media doesn't work on different sites

StackOverflow https://stackoverflow.com/questions/23516573

  •  17-07-2023
  •  | 
  •  

Question

Here's the css code:

@media (max-width:600) {
body{
    background-color:red;
    }
}
p{
  color:blue;   
}

The problem is that the @media part doesn't work at all. I tested it on 3 devices (including PC) and tried to change my browser's window size. However, when I change (max-width:600) on screen, the whole thing works. What could be wrong? In addition, adding media='max-width:600' to <link> tag causes css to crash (the entire css doesn't work at all in this case) – what is this??

P.S.: the code above and adding media='....' works within codecademy.com codebit, but doesn't work on my site, where I test the whole thing. (http://peoples.pw)

Was it helpful?

Solution

You're missing the unit. I guess you're using pixels, so it'd be something like this:

@media (max-width:600px) {
body{
    background-color:red;
    }
}
p{
  color:blue;   
}

Demo: http://jsbin.com/fovesaci/1/

Edit: About the second question, you need to place it in parentheses. So this media='max-width: 600px' should be something like this media='(max-width: 600px)'. It's a reasonable mistake since media attr has been mostly used for print, screen or all which have no parentheses at all.

OTHER TIPS

use <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> in <head> tag

and css use px in width

@media (max-width:600px) {
body{
    background-color:red;
    }
}
p{
  color:blue;   
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top