StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POThe menu of my site doesn't look right when I view it on my iPhone
text
Body
copied!<p>When I view <a href="http://americaspoeticsoul.com" rel="nofollow noreferrer">www.americaspoeticsoul.com</a> on my iPhone, the menu overflows for some reason. See:</p> <p><img src="https://i.stack.imgur.com/Y81w8.png" alt="Menu overflows on iPhone"></p> <p>And it even looks worst on the other pages because of the title: </p> <p><img src="https://i.stack.imgur.com/kzJw7.png" alt="Worst on other pages - overflows over the header"></p> <p>Anyone know why it's like this? And is there a way to fix it? Here's the CSS for the menu:</p> <pre><code>/*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; } </code></pre> <p>Thanks,</p> <p>Nathan</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload