CODEWITHSUNDEEP
htmlcssresponsive-design
Matt Roelle
Matt Roelle

Reputation: 149

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

Upvotes: 3

Views: 2715

Answers (1)

Surjith S M
Surjith S M

Reputation: 6740

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;}
}

Upvotes: 6

Related Questions