Design not scrolling for some on mobile?

Recently I’ve been working on my portfolio site, lauramclemore.com. I sent it to a friend, and they said the page breaks and won’t scroll on mobile.

There’s definitely a lot more I need to improve for mobile, but when I look at my site on my phone,
I’m able to scroll all of the pages and see everything just fine!

Right now I’m really confused, especially as I’m not able to see what’s going on. Does anyone have any ideas as to what might be causing this to happen?

I’ve shared a read-only link to might site below as well. Any thoughts or ideas would be much appreciated!


Here is my site Read-Only: LINK

Hello @lacke

Here’s where the issue is happening, your body is set to overflow hidden which makes the browser think you want to only show 100vw/100vh which is why it disables scroll. I’m guessing you added overflow hidden for some reason so what I would suggest is adding a div block into your structure, naming it “Page Wrapper” or something like that and assigning overflow: hidden to that element rather than to the body itself. Just make sure that “Page Wrapper” has height set to auto and it will work.

Let me know how it goes or if you need any guidance, cheers!

1 Like

Hi @Incognito_Agency, thank you so much for your response and your help!

The reason I initially set the body to overflow hidden was because the elements on my page were making it so that users could scroll horizontally on pages, resulting in an empty space on the right side that looks like this:

I tried taking your advice and making a “page wrapper” div block, but I’m still running into the same problem of being able to scroll horizontally / there being too much empty white space on the right hand side.

I am a total newbie when it comes to this stuff, I’m positive I’ve done something wrong but I’m not sure what? I set the height to auto and the overflow to hidden on that div block - but maybe there’s something else I also need to do?

Here is a read-only of the page on my site that I edited!

Hey @lacke

Must have missed your answer on the thread. I see that issue is still happening but it is simply due to page wrapper being set a bit wrong for responsive. As you can see it’s set to overflow none on desktop but on mobile it’s set to overflow visible. Once you adjust that, the page won’t be scrollable horizontally any more.

Also a few reasons why you get so much overflow on the page:

  1. Most of the images that use graphics, specifically ones that are like curved lines are set to be 700% wide
  2. A lot of those images actually have negative margins to the side which also pulls them even more to the side.
    3.You should definitely try reusing most of the classes since not all elements there are unique, they can share most of the attributes. By resuing classes it will be a lot easier to mange everything on the responsive side.

Let me know if this helps or if you need any further assistance, cheers!

set overflow hidden for each section and then set body overflow to visible. This should solve it.