Mysterious Body Overflow on Mobile

Design help General
1

Hey Guys, I’ve been struggling with a mystery here. Can you please help out?

On mobile only, I get a weird body overflow and horizontal scrollbars, but all the content is within margins … I think. I can’t find what’s getting out of view or to fix it.

At first I thought It was the portrait picture from the header. On mobile only, I set it to margin right and adjusted it to background-position-x: 85%; so that the face doesn’t overlap with the text. I thought this was the problem but upon changing it back, to center (just for the sake of the test) I still get overflow and horizontal scrollbar on mobile. Can’t find the problem :frowning:

Here are two screenshots from phone Safari and Chrome:

mobile%20view
mobile%20view1920×948 831 KB
Photo%2010-07-2018%2C%2020%2056%2040
Photo%2010-07-2018%2C%2020%2056%2040750×1334 167 KB
mobile%20view
mobile%20view1920×948 831 KB
Photo%2010-07-2018%2C%2020%2056%2040
Photo%2010-07-2018%2C%2020%2056%2040750×1334 167 KB

Preview Link: https://preview.webflow.com/preview/danostafi?preview=8c71c5c4f1f38e817ee50a527a96661d

Webflow Published Link: http://danostafi.webflow.io/

Live website (optional): http://www.ostafi.pro

2

Hello div?

More like, “Hello, CULPRIT!”

Set that width to auto on mobile and you’ll be good to go.

54%20PM
54%20PM1760×975 167 KB

3

Thanks a bunch @Cricitem. It did the job!
A case of beer from me! :beers:

1 Like
4

I have the same issue with a script I embedded a banner image it will not adjust when changing orientation from web to mobile. my page