Target Mobiles using CSS

[qwaerstd]

Hi

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?

Thanks

[qwaerstd]

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.

[qwaerstd]

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

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