@media-query breaks flow within 33px, works fine before/after

[GroovyMotion]

I have made another @media query test in order to resize everything if a device width is between 768 and 880px, it works fine but if I resize between 863 and 896px the top nav breaks apart. If it’s beyond 880px it should just stick to the normal css layout as if it was full-width and that 863px is a real puzzler! Could it be possible that my min/max values are not big enough?

Here is my pen: http://codepen.io/GroovyMotion/pen/qhbCp

Thanks in advance!

edit: I just noticed that within the pen in ff it works perfectly, it breaks apart in chrome!

[Paulie_D]

For me, in Chrome, it looks like you need a breakpoint at c.1024px as the Codepen layout breaks there too

Is the menu supposed to be centered?

The rest of it might be how browsers interpret the viewport window. I think some include the scrollbars &/or browser ‘chrome’ and some don’t.

[GroovyMotion]

Hmmm…it’s weird for the 1024px breakpoint.
Yeah the menu should be centered and what I did is several width for the li and I make the logo resize as well.
Yeah it might depend on the user’s OS theme since some themes have very tiny scrollbars and others have large ones

I just noticed that in the pen I remove the head tags because it’s not needed but could the meta tag be the culprit? It’s <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

[Paulie_D]

At the very least…don’t do this.

user-scalable=no,  maximum-scale=1

If you wear glasses, as I do, I NEED to be able to scale in order to read a site.

[GroovyMotion]

ok thanks Paulie, I wear glasses myself. I got this meta tag and thought it was the “best solution” so it’s obviously not! :)
So I will remove user-scalable=no, maximum-scale=1

[Author]

Posts