SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Corrections for Mobile Devices

    I'm having trouble getting a global CSS for Mobile Devices. I have the following in my <head> tag:

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template.css" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1024px)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css" />

    The upside: the site I have doesn't look back on the iPhone with the exception of the main menu on the page is shorter than it should be

    The downside: the main menu on a Toshiba Thrive wraps under the 'Home' main menu button.

    I added this to the menu's CSS:

    @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .sf-menu li.item1 a {
    padding-right: 40px;
    }
    }

    But it didn't seem to make much difference.

    Any good advice?

    Thank you.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,113
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    tip: You can use [code ] [/code ] tags around the code in your posts to put them in the formatted boxes.

    I don't have a Toshiba Thrive to test it on but I can talk you through what you need to do.
    You can't simply whack on a mobile friendly stylesheet and get it behaving nicely - It takes work to get right.

    You can remove these - just use embedded media queries in your main css file.
    Code:
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1024px)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css" />
    If you want to make it mobile friendly the right way you'll need to add this so the phone doesn't zoom the content.
    Code html5:
    <meta name="viewport" content="initial-scale=1.0, width=device-width">

    I think you probably want to linearize the menu ( remove floats, show hidden nested menus) - This type of thing.
    Code css:
    @media only screen and (max-device-width: 480px) {
      .menu li, .menu ul {
        float: none !important;
        display: block !important;
        position: static !important;
      }
    }
    It's going to take lots of tweaking though.
    You can read through some examples here http://dev.opera.com/articles/view/a...-and-viewport/

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, I removed the recommended lines and added the viewport tag. On the Thrive, it looks great, but on the iPhone, the background is tweaked to the left and the the last menu item is still wrapped under the 'About Us'.

    I have not bothered with tweaking the menu because this site is using a Joomla extensions for the menu.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •