Search code examples
google-chromejoomlamobile-safaricss

Strange CSS behaviour with overflow?

I'm having some issues with a Joomla template I'm coding. I think it's because of overflow which I applied to avoid floating issues but not sure at all.

First of all, the page gets a scroll bar on the X axis on Chrome. Working good at IE and Firefox though. The weirdest part is that if you change the window size or just open the Dev tools, it fixes itself... I know I could do something like:

body { overflow-x: hidden; }

But I think I shouldn't need it.

Also (and I think it's really related) it's really weird on iOS Mobile Safari and Chrome...

Screenshot

What's wrong?

http://www.reconstrucciondeaccidentes.es/web/

Solution

  • Mobile Safari assumes a page as being 980px wide. As yours is 990px, the header appears to be sitting outside of the viewport.

    You can stop Safari from assuming a 980px page width (which accomodates the majority of sites built for desktop browsers) by putting the following in your :

    <meta name="viewport" content="width=990" />