Nick Solonko Nick Solonko - 5 months ago 8
CSS Question

How to prevent my website from being scrolled horizontally?

I am trying to make my website compatible with different devices. On a computer, only the content is shown and the user can't scroll horizontally. On portrait mode of an iPhone, there is a horizontal scrollbar. I tried using overflow-x to prevent this, but it doesn't fix the problem. Here is the temporary link to the website. The issue does't occur in landscape mode. This is what it looks like on iPhone: enter image description here

Answer

Looks to me like the offender is here in the markup:

<p id="footerP">Mykyta Solonko 2016</p>

The styles have this rule:

#footerP {
  left: 1090px
}

That is causing that paragraph to render on the far right of the screen. It's tough to see b/c it's white on that light background color.

screenshot

Remove that rule and the space on the right goes away.

Comments