Reputation: 2028
Can't Figure Out How to Fix CSS Width
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):
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.
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?
Upvotes: 1
Views: 117
Answers (2)
Reputation: 290
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>
Upvotes: 1
