Mobile CSS not working

[toolman]

Hi,

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) { 
.coachinfo{
margin: 60px!important;
display:inline-block!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?

thanks

[ronpat]

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.

[TechnoBear]

@toolman

any ideas what could be stopping it from working?

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?

@PaulOB

You don’t need to check for orientation if you use width as you get screen width and not device width.

See also Media Queries: Width vs. Device Width

[toolman]

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