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 wrap a vertical overflow horizontally in css?

    How do I centralize an ordered list?

    How do I assign styling to a Javascript variable?

    How to block CSS and js file loading in Google Blogger template?

    how to give style to the selected option in html

    Color of links not always showing correctly

    How to display inline input in li?

    CSS How to hide text after a span

    How to control multiple images for a single background definition

    How do I place text to the right of a relatively positioned image?

    How to do isometric 3D in CSS

    How can I align the left edge of HTML form elements using CSS?

    How to center inside divs in a 1140px fluid responsive framework?

    How to CSS select all cells with colspan set?

    using overflow hidden, show a partial element when the children are too large for container

    css: How to float div according to 2nd div in hierarchy

    How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

    How to prevent fixed image from scrolling down?

    How do I get text in my html page to display features using the css stylesheet?

    CSS height, How to get it to go around inner divs

    How to truncate paragragh lines in css [duplicate]

    How to move a carousel item to the middle when it's clicked in jquery

    How to add a border around a canvas?

    How to make layout with fixed sized column in Liferay?

    How to set the CSS content property with a Google Material Icon?

    how to arrange the sequence of js and css files in webpage?

    How to do mobile devices-friendly CSS for both desktop and mobile devices

    How do I vertically centre a div of variable height within a div of variable height?

    how would I use Javascript, html and css to produce the running tiger effect seen in run4tigers website? [closed]

    How to get less to output a css variable with quotes