htmlcssmobilecross-browseropera-mobile

Div messed up in Opera Mobile when zooming in

I' using a div on my website with the following css class:

width: 100%;
margin: 6px auto 0;
height: 51px;
line-height: 50px;
text-align: center;
max-width: 1290px;

There are several links in this div with the following css class:

display: inline-block;
width: 7.5%;

Note: I've also tried the following:

display: inline;
padding: 0 20px;

This layout works fine on all major browsers (including Android stock browser), however im experiencing nasty problems on Opera Mobile when zooming in. Have a look: Opera Mobile Zoomed in

It is being wrapped into 2 lines basically.

( div id="menu" )

Solution

  • A simple:

    white-space: nowrap;

    to the #menu class fixed this problem.