[Solved] Site content overflowing in the x axis

[danielemanca83]

Hey folks,

I am posting in here with the hope some of you can help, as I am unable to detect the reason why the content of a site I am currently working on is overflowing and therefore creative scroll bar on the bottom of my smartphone screen (HTC One).

Sample link is http://hdl.fitzroviadigital.co.uk/investment-banking/ and the media query that covers this is @media screen and (min-width: 321px) and (max-width: 767px) { }

If anyone could spot the error I would appreciate it,

Thanks a lot.

[Atelierbram]

Maybe try to change

    <meta name="viewport" content="width=device-width; initial-scale=1.0">

to

    <meta name="viewport" content="width=device-width, initial-scale=1">  

note the semicolon after width=device-width should be a comma

[danielemanca83]

Hi there,

Thanks for the reply, however I just tried it and doesn’t seem to work either…

Dani

[Atelierbram]

Can only try this in chrome devtools emulator myself, and seems better now, … have you refreshed your browser’s cache on the phone?
Have you tried temporarily removing the banner image (which has a set inline width of 800px)?

[Paulie_D]

Have you tried temporarily removing the banner image (which has a set inline width of 800px?

This definitely. Although you’d need to make the image responsive too….probably.

[danielemanca83]

Hey folks thanks for the help,

In the end it had to be something very silly, which was: the logo image’s width was set to wider than the device’s width, hence the scrolling,

Thanks anyway.

[Author]

Posts