Media queries doesn't work

css, html, media-queries, responsive-design

Solution

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)

Problem

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/

Original source

Related problems