Mobile CSS not working


I have the following CSS which I am trying to target mobile devices only. It is appearing in the code, but not actually changing the CSS:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
margin: 60px!important;
background: #000;
padding: 60px;
float: left;
postition: relative;

The HTML is:

<div class="coachinfo">text</div>

I’m using WordPress to insert it and it’s appearing correctly in the HEAD. I’ve tried using !important too but no luck.

any ideas what could be stopping it from working?


Inadequate information given about context. What have you done on your own? What developer’s tools do you use?

Consider ruling out possible causes by elimination of HTML and CSS.

At a guess, you have some kind of conflict somewhere, but without seeing the whole page, it’s impossible to diagnose more accurately. Can you post a link to the live page?

Have you tried using “width” rather than “device-width” in your queries?

See also Media Queries: Width vs. Device Width


Thanks, it worked with just the “width” approach.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.