CSS Mobile Friendly Stylesheet

HTML & CSS
1

I have a website that I just need to make some minor changes to the CSS. Otherwise it looks pretty good on mobile devices. Instead of rewriting a whole stylesheet for mobile devices, how can I implement some minor changes.

I have a Thrive and and iPhone that display similar discrepancies, but I’m not sure how to implement the changes so just mobile devices can detect these changes.

Thank you.

2

You can use the media queries :). Take for example, this.

<link rel=“stylesheet” type=“text/css” media=“all” href=“main.css”>
<link rel=“stylesheet” type=“text/css” media=“handheld” href=“minorchangestoMobiles.css”>

In the 2nd stylesheet, you would just be making the minor changes there. Note how it comes AFTER the main.css stylesheet, which allows the 2nd sheet to override the first, where applicable :).

3

Thanks RyanReese!

I was able to do the following:
<link rel=“stylesheet” href=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template.css” 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-device-width: 480px)” href=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css” />
<link rel=“stylesheet” media=“screen and (-webkit-device-pixel-ratio:1.5)” href=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/android.css” />
<link rel=“stylesheet” type=“text/css” media=“handheld” href=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/android.css”>
<meta name=“viewport” content=“width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

but when I view the site on my Android, the only thing that I saw different was the ratio size of the screen. My main menu is still wrapping the last menu item.

4

I don’t have an andriod so I won’t be able to help.

Wrapping items usually indicates that there isn’t enough width on the screen to hold them all on the same line. Make sure you do indeed have enough room.

5

Thanks, RyanReese.

I was able to get it to work well with my iPhone, but menu is still wrapping with the Android Thrive. Looks like I’ll need to look into it a little further.