1

Have the following media query:

@media(max-width:980px){
/*Do something*/
}

The above works, but when I try to do:

   @media only screen and (max-width:980px){
    /*Do something*/
   }

Doesn't work!

Tested it on all browsers (desktop). Every time I try to add "only screen" or anything else (before the parentheses) besides "@media" I can't get it to work. I typically uses SASS, and include a _responsive.sass file at the end of the main file. Does it have to do with my viewport settings?

<meta name="viewport" content="width=device-width" />
  • Only is used for older browsers, do you really need it? – Ali Gajani May 19 '14 at 23:02
  • 1
    No, just trying to avoid conflict with print queries. But it doesn't matter. I removed "only" and still have the same issue. Whenever i add anything between media and the opening parenthesis the query stops working. –  May 19 '14 at 23:04
  • Show us some of your work on JSFiddle so we can play around to help you. – Ali Gajani May 19 '14 at 23:06
  • If you (or your SASS compiler) are using the YUI compressor with a version earlier than 2.4.4, there is a known bug which causes the space following the and to be removed which breaks the media query. See http://stackoverflow.com/questions/4144706/is-there-a-version-of-yui-compressor-that-deals-correctly-with-media-queries. You should check the css being served to the browser to ensure the space is there. If it is not, either manually reinsert it, update your YUI compressor version or use another minifier. – Courtney7 May 19 '14 at 23:38
  • @Ali Gajani: `only` is used to filter out legacy browsers. It's not used *for* them. – BoltClock May 20 '14 at 01:16

1 Answers1

0

Don't use only, try this syntax:

body{
    background-color:blue;
}

@media screen and (min-width: 500px){
    body{ background-color:red; }
}

http://jsfiddle.net/fPMSm/

Mister Epic
  • 16,295
  • 13
  • 76
  • 147
  • `only` is not supposed to have any effect on its own except to filter out legacy browsers. I'm pretty sure the OP understands that and isn't mistakenly trying to test this on a legacy browser (there are none that support the media feature syntax anyway). – BoltClock May 20 '14 at 01:15
  • Removing "only" and also adding a space after "and" fixed it. Thanks for all who took a look at it. –  May 20 '14 at 18:20