Target Mobiles using CSS


I’m developing a site and just need to make a couple of changes to optimise it for mobiles (namely in the footer).

I’ve done quite a bit of research and most people suggest that the code below is the best way to target mobiles via CSS. However I can’t get it to work for me. Whatever changes I make, they have no effect. I’m testing on an Android phone.

@media screen and (max-device-width: 480px) {
#footer { position: static;}

Can anyone suggest what I might be doing wrong?


I’ve also tried to use another style sheet like this:

<link href=“mobile.css” rel=“stylesheet” type=“text/css” media=“only screen and (max-device-width: 480px)” />

but no joy.

I found this worked my phone, as it’s 800px when landscape:

@media only screen and (max-device-width: 1000px) {
#footer { position: static;}