Support » Themes and Templates » mobile css

mobile css

  • Hi
    I’m creating a twentyten child theme.

    There are a few styles I want to alter for mobiles (eg position: fixed in the footer is not going to look to hot on a smartphone) but essentially the theme will be the same.

    What’s the best way of targeting mobiles using CSS?

    Thanks in anticipation.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Have a read of this: http://www.w3.org/TR/CSS2/media.html

    Typically, you’d use a stylesheet with the media=”handheld” attribute to tell browsers to use it for mobile devices.

    Will all mobile devices recognise this? Would this override any devices that use media=”screen”?

    I’ve tried to target mobiles inline like this:

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

    and through another stylesheet like this:

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

    but am not having any luck.

    Does anyone have any ideas?

    PS I’m testing on Android


    That all looks like it should work.

    Have you got a link to your site? It’s easier to troubleshoot these type of problems if we can see it in action.

    This worked:

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘mobile css’ is closed to new replies.
Skip to toolbar