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 do I use css transitions to scale an image and move it at the same time?

    How to use center-block and vertical align together using Bootstrap?

    Divs showing and then hiding on page load

    How can I get images floated to the left of other definition list elements?

    How to use CSS to create an image overlay effect?

    How to move div from bottom to top

    How do I to adjust the identation [closed]

    How to put a footer in the bottom (but not fixed or stick!) with css [duplicate]

    how to change the css in td on mouse click using javascript

    How do I create CSS only tabs/pages with #hash URLs?

    How to correctly override default JavaFX 8 CSS on TableView

    How to convert this xpath to css?

    How to click on and off submenu's using javascript

    How can I force an image to display in its entirety with CSS?

    How do I remove Bootstrap from asp.net project?

    How to make a HTML list appear horizontally instead of vertically using CSS only?

    how to write IE 8 specific css styles

    How to animate X number of divs using CSS and javascript?

    how i center div elements horizontally in css?

    How to change MenuItem focus/hover color

    How to remove the input field around an image button?

    How to do two border upon one div tag by css or by css3? [duplicate]

    How to make an image resize to the screens height with CSS?

    How to create a dropdown menu like google's 'More' button?

    gwt how to use setStyleName(String style, boolean add) - for a gwt standard widget

    How to add CSS class to password field using jquery in MVC?

    How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

    How can I group DIVs in my document so I can apply CSS to them?

    float css only menu - how to modify on section2

    PHP & CSS: How to get hover effect for each row of a table?