CSS media query not applying

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" />

CSS media query not applying

1 Answers