CSS Corrections for Mobile Devices

HTML & CSS
1

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

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.


<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.

<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.


@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/an-introduction-to-meta-viewport-and-viewport/

3

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.