horizontal menu – break down on zoom

[bishtdbest]

horizontal menu line break When Zoom in/out (CTRL+scroll) .. is there any perfect solution for this.. condition

plz give urs advice and solution.

stye:





body {

font: normal 1.1em/1.2 Arial, Helvetica, sans-serif

}

.page {

width: 720px;

margin: 0 auto;

}

.nav {

overflow: hidden;

list-style: none;

padding: 0;

margin: 0;

background: #CCC;

}

.nav li {

float: left;

padding: 2px 10px;

background: #999;

color: white;

margin: 0 7px;

}





HTML :





<div class="page">

<ul class="nav">

<li>list 1</li>

<li>list 2</li>

<li>list 3</li>

<li>list 4</li>

<li>list 5</li>

<li>list 6</li>

<li>list 7</li>

<li>list 8</li>

<li>list 9</li>

<li>list 10</li>

</ul>

</div>

[GMB]

???
Could you put your code up on CodePen so we can take a look?

[Paulie_D]

I believe that that this is a webkit specific bug affecting pixel based media queries.

If you use ems instead of px in your queries…it seems to work.

[ramkumarramaraj]

Hi,

URL?

[bishtdbest]

stye:





body {

font: normal 1.1em/1.2 Arial, Helvetica, sans-serif

}

.page {

width: 720px;

margin: 0 auto;

}

.nav {

overflow: hidden;

list-style: none;

padding: 0;

margin: 0;

background: #CCC;

}

.nav li {

float: left;

padding: 2px 10px;

background: #999;

color: white;

margin: 0 7px;

}





HTML :





<div class="page">

<ul class="nav">

<li>list 1</li>

<li>list 2</li>

<li>list 3</li>

<li>list 4</li>

<li>list 5</li>

<li>list 6</li>

<li>list 7</li>

<li>list 8</li>

<li>list 9</li>

<li>list 10</li>

</ul>

</div>

[Paulie_D]

Very simply, don’t use pixel values in your widths/padding/margins…use %.

See: http://codepen.io/anon/pen/okqwH

[bishtdbest]

don’t use width in li …. text will change

[Paulie_D]

I have no idea what that means…why would the text change?

[Senff]

To my knowledge, there is no fool-proof solution for making sure something will look perfect when zoomed in or zoomed out. It will always distort somewhat, and sometimes that results in very funky layouts in some browsers.

This is the most obvious when you use pixels (zooming in/out will result in half-pixels and then the browser has to fix that by rounding up or down), but I’ve seen situations where other things are off when zooming.

[bishtdbest]

i think we can use @ media query in css for all resolution..

yes this is prefect solution for this condition :)

[Author]

Posts