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…
What’s wrong?
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" />