The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #164010

    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:

    Thanks in advance!

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


    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.


    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">


    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.


    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.