0

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)

goodmove
  • 51
  • 5

2 Answers2

0

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;   
}
Amit
  • 1,841
  • 1
  • 19
  • 36
  • Thanks a lot! But the second question's still open: why adding causes the in entire css file not to work? – goodmove May 07 '14 at 12:20
  • this artical will help you https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – Amit May 07 '14 at 12:43
0

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.

jaicab
  • 236
  • 1
  • 7
  • Thanks a lot! But the second question's still open: why adding `` causes the in entire css file not to work? – goodmove May 07 '14 at 11:57
  • Just edited to answer that. You need to match the media query syntax, so properties are placed in parentheses. – jaicab May 09 '14 at 10:40