CSS media query not applying

Question

I'm using this media query in my main css stylesheet and it doesn't seem to be working.

@media only screen and (max-device-width : 768px) {
    .small { display: block; }
    .big { display: none !important;}
}

In the web inspector it doesn't even show up as a rule, however when i look in the sources panel the query is obviously there. So i'm not sure what the problem could be. I am trying to target devices with a width less than 768px.

Here's how i'm linking to the stylesheet, if that matters <link rel="stylesheet" media="screen" type="text/css" href="{site_url}interface/style.css" />

Answer 1

As you are using max-device-width it won't affect in web browsers, You should check on mobile browsers to see its working or not.

Or if you want to check on web browsers, Then use just max-width instead.

See Working Demo

CSS

@media only screen and (max-width : 768px) {
    .small { display: block; }
    .big { display: none;}
}