WordPress.org

Ready to get started?Download WordPress

Forums

mobile css (6 posts)

  1. wambamboo
    Member
    Posted 3 years ago #

    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.

  2. DigitalSquid
    Member
    Posted 3 years ago #

    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.

  3. wambamboo
    Member
    Posted 3 years ago #

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

  4. wambamboo
    Member
    Posted 3 years ago #

    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

    Thanks

  5. DigitalSquid
    Member
    Posted 3 years ago #

    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.

  6. wambamboo
    Member
    Posted 3 years ago #

    This worked:

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.