Can't Figure Out How to Fix CSS Width


Tags: html,css,formatting

Problem :

My website's navigation renders properly on all computers, but is truncated/wrapped on mobile devices (iOS).

The relevant CSS is:

.custom .menu {
margin-top: 1.25em;
margin-left: 288px;
width: 442px;
}

.custom .menu a {
font-size: 1.4em;
font-weight: bold;
text-align: left;
}

The relevant HTML is:

<div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-19"><a href="http://rainleader.com/">Home</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://rainleader.com/about/">About</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://rainleader.com/services/">Services</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://rainleader.com/blog/">Blog</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://rainleader.com/contact/">Contact</a></li>
</ul></div>

Here's how it should look (PC/Mac):

Screenshot

But on iOS, "Contact" is cut off the end and pushed below "Home". In other words, the menu ends at "Blog" and has a second row with only "Contact" in it.

If I increase the value of width, it extends the bottom border line at the end of the menu on PC/Mac without resolving the problem on iOS.

Screenshot w/ Width Increased (PC/Mac)

Noticed the extended bottom border line above, but it's still truncating/wrapping "Contact" on iOS.

What am I doing wrong? Or, how should I fix this?

Demo



Solution :

if you set width: 437px to .custom .menu doesn't it fit nicely under the menu?

also, try using .custom .menu { border: none; } on the <ul>


    CSS Howto..

    How to override the CSS !important property when the original file loads after the customized css file

    How to change 1 out of a menu/model thing with css instead of a whole model/menu?

    How to avoid wrapping in CSS float

    How would you style a PHP suffix with CSS?

    How to Create 3 Column Layout with CSS Only?

    How to render my dialog on top?

    “ul li a:link, a:visited” and “ul li a, visited” how they different?

    selectCheckboxMenu: items are shown with bold font

    How to assign CSS background image properties mixing classes and ids

    How to force modern Internet Explorer to show proper gradient background in real web sites

    How to change CSS over selected element only using $(this)

    How to change buttons to pictures in jquery dialog

    How to scroll .list-group leaving navigation bar at top

    How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?

    How to make submenus have the same width as the menu CSS/HTML5

    How can I get the box with text to stick to the top of each wrap div?

    PHP+CSS Obfuscation - PHP ord THEN PHP strrev + CSS reverse text, how to get the special chars validated backwards?

    How to add border inner side of image using CSS

    How to Detect css by iPhone/iPad

    How to build some basic tiles with Title and Description?

    How to disable border on the second last child of div in CSS?

    how to add a CSS class inside a JavaScript setup code?

    How To Put Values Dynamically

    How to create multi-column data entry form using CSS in Asp.Net?

    how do i get images to display in a rows like this using php and css?

    How to force inline-block wrap to new line using CSS or jQuery?

    How to achieve the following design in css in jquery mobile

    Responsive portrait images, Hows & Dont's?

    How to insert 5 pictures next to eachother in a row

    How to make semi-transparent background [duplicate]