CODEWITHSUNDEEP
iphonecssiosipadipod-touch
Nathan
Nathan

Reputation: 12000

The menu of my site doesn't look right when I view it on my iPhone

When I view www.americaspoeticsoul.com on my iPhone, the menu overflows for some reason. See:

Menu overflows on iPhone

And it even looks worst on the other pages because of the title:

Worst on other pages - overflows over the header

Anyone know why it's like this? And is there a way to fix it? Here's the CSS for the menu:

/*Menu*/

#menu {
    margin-bottom:15px;
    width:450px;
}

#menu ul { /* remove bullets and list indents */
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    float:left;
}

#menu ul li a {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#D41C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a:hover {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a.current_link {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

Thanks,

Nathan

Upvotes: 2

Views: 658

Answers (4)

Tim Hettler
Tim Hettler

Reputation: 1256

You could try adding this to your CSS file:

html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }

This will stop Mobile Safari (and Windows Phone) from adjusting the size of your text in an attempt to make it more readable.

EDIT: If you only want to affect the text-size-adjust on mobile phones, you could use a media query:

@media screen and (max-device-width: 480px) {

  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

If you're feeling ambitious, you should consider adjusting the layout on a more fundamental level for smaller screen sizes. Any CSS you put inside that media query will get applied to devices that have a screen size of 480px or less.

For example, the buttons may be a bit too small for fingers to reliably tap on them. A better alternative would be to linearize the layout so that there's only one column and each link button takes up the full width of the screen.

Upvotes: 1

Sparky
Sparky

Reputation: 98738

You're discovering one of the downsides of relying on text/fonts within your menu system. There is way too much variability (OS, browser, device, etc.) to expect the text to always behave properly or even use the font you intended.

I use a graphically created menu system which never changes no matter what and a simple text menu in the footer as a fallback.

Upvotes: 1

idrumgood
idrumgood

Reputation: 4924

You're not setting an explicit width on the menu items which leaves their width at the mercy of the browser and how large the font-size + margins and padding end up being. In the case of mobile browsers (Android too), your width is just too much for the 450px that you have. Try dropping the font size a point or something.

Upvotes: 2

iandotkelly
iandotkelly

Reputation: 9124

As an iPhone user and developer - I wouldn't use a site like yours on the phone unless I really had to - it would require all sorts of zooming in before I could read or click on that menu.

If you have content that you would like to present via a menu on an iPhone, I would recommend detecting small-screen mobile browsers and redirecting them to a mobile specific menu at the very least - jQuery Mobile is so easy to use to create a menu.

This is just a response about iPhone or similar size screens - I'm sure you'd want to fix this on an iPad if it looks the same.

Upvotes: 4

Related Questions