9

Does anyone know why my media queries code doesn't work ? 

 <div class="box"></div> 

 .box {
     background-color: red;
     width: 100%;
     height: 50px;
 } 

 @media only screen and (max-device-width: 768px)  {
     .box {border: 5px solid blue;}
 }

http://jsfiddle.net/N9mYU/

br.julien
  • 3,420
  • 2
  • 23
  • 44
user2013488
  • 363
  • 2
  • 6
  • 16

3 Answers3

15

You would use (max-width: 768px) instead of (max-device-width: 768px). See the difference between max-device-width/max-width explained here.

Add a viewport if you want the media query to work on mobile devices:

<meta name="viewport" content="width=device-width, initial-scale=1">

UPDATED EXAMPLE HERE

@media only screen and (max-width: 768px) {
    .box {
        border: 5px solid blue;
    }
}

Further reading: A pixel is not a pixel/Viewport width and screen width (mdn)

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
0

The most common reason for this issue is you define your @media queries before styling your element in CSS file so you should always put @media queries at the end of your CSS file!

Mohammad reza Ayubi
  • 111
  • 1
  • 4
-4

Sorry folks but this question just became moot: Firefox Dev edition just did an upgrade and changed how the device screens are presented: you can no longer select screen size by pixel using a drop down box; you now have to select the device name which will have its dimensions displayed.

I've long had problems when Firefox has issued an update while I have the browser open.

The regular Firefox browser with firebug is now more responsive. Some of issues I have been dealing with is that when I set a limit such as "min-width 320px" FDE only performs the change at a larger min, say 380px. This does not change in the updated edition.

etkronberg
  • 27
  • 2
  • 10
  • 1
    This question did not become moot. You can still resize your browser without using Dev tools. Nor does this question ask about dev tools. The original question was because of `max-device-width` vs. `max-width`. FF Dev has had the device dropdown for a couple versions now. – disinfor Jun 28 '17 at 22:46