CODEWITHSUNDEEP
google-chromejoomlamobile-safaricss
Antonio Laguna
Antonio Laguna

Reputation: 9300

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/

Upvotes: 1

Views: 384

Answers (1)

Ian Lunn
Ian Lunn

Reputation: 1402

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

Upvotes: 1

Related Questions