Menu looks inconsistent with different screen resolutions.

[Wavejumper313]

Please look at the site that I’m working on: http://www.forwardartsdetroit.org

The issue I’m having is with the menu. It’s, more or less, a standard unordered list menu. I’ve set the margin, padding and font-size on the menu links so that the menu fits neatly on one horizontal line between the header and main content region. The menu looks fine with my screen resolution of 1600 x 900. However, when I look at the site on either a smart phone (i.e. 320 X 480) or a screen with a higher resolution (i.e. 1920 x 1080) the menu wraps. The ‘Donate’ menu item appears on a second line as there is not enough room for it! I don’t understand why the font-size and padding is scaling differently for different screen resolutions. (Using an identical browser on the larger screen, and yes, the zoom was reset.) If I reduce the padding and font-size then the menu will fit on one line for mobile and large screens but then on other screens the menu is now too short and there is a huge gap at the end. Is there a CSS solution to this? I’m trying to avoid using a javascript hack. Thanks.

ul#menu
{
border-bottom: none;
padding: 0;
position: relative;
margin: 0;
text-align: left;
text-indent:0;
}

ul#menu li
{
display:inline;
list-style: none;
margin:0;
padding:0;
float:left;
}

ul#menu li a
{
margin: 0;
padding:0;
padding: 9px 14px 9px 14px;
font-weight: normal;
text-decoration: none;
font-size:18px;
font-weight: bold;
}

[Wavejumper313]

All text on the site, in general, looks bigger on the screens with a very low or very high resolution than on the screen I use that has a 1600 x 900 resolution. (Even with zoom reset and using identical browsers.) Why is this? How can I make the font size consistent?

[Wavejumper313]

UPDATE: The issue with the larger screen resolution does not seem to be a CSS issue. I’ve checked this on a few more set-ups and only computers running windows 7 (and with any resolution) show the wrapping menu. It just so happened that the first two screens where I saw the menu wrapping had a res of 1900 x 1080 and were running w7. So . . . nevermind on that, I guess.

But, I’m still trying to figure out the mobile issue. I’ve just read that mobile browsers increase the font size of wide blocks. I added the following css to the body element but . . . still . . . the menu is wrapping on my android:

-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;

[Wavejumper313]

I set padding to zero and added specific widths to each of the menu items. It seems to be working now.

[Author]

Posts