I designed a website with CSS navigation bar on top (and left). This is a testing page: India International Nuclear Symposium
The page displays good on IE and Firefox but on mobile’s browser (iphone or blackberry) the links display on two lines. I reduced the width of the page to 995px and still no difference. Can anybody tell me how can I fix this problem?
thank you
Hi,
The text in your nav only just fits along the whole length so you will find that in some browsers or devices it will flow to the next line because no two browsers render text at the same width and you will find that text will vary by as much as 50px along the length of a line.
The simple option would be to trim down the words in the menu a little and then it will fit everywhere.
Alternatively add a negative right margin to the last item to stop it wrapping (although this will allow it to poke out in devices where it’s too long.)
#nav-menu li:last-child {margin-right:-100px}
Of course if you are really coding for smaller devices you should be catering for them specifically rather than have the device scale them incredibly small.
See the mobile forum for other related issues and tips.
In OperaMini, it comes up with the links on one line - as Paul said, it very much depends on the device you’re using. Mobile browsers are particularly prone to laying the page out slightly differently to make it easier to read.
I would make two suggestions that could help here:
First, shorten the text. It will help it fit on one line, and make it more punchy. At the moment, those links are just too wordy to be interesting.
Second, don’t use ALL CAPITALS. Mixed case is easier to read, less aggressive, and also takes up less screen space, which will help it to fit on one line.