Media queries doesn't work

Question

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/

Yardmaster

device-width is deprecated now. – Buber

Answer 1

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)

Unmade

Answer 2

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!

Soph

Answer 3

Try this, at the top of the page, this is for smartphone responsitivity

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Ovotestis

Answer 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.

Haggis

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. – Corr