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.