Streaming live at 10am (PST)

Page can't be scrolled on mobile

The site behaves very weird when used on mobile.
You can scroll the site horizontically with approx. 200vw and the scrolling doesn’t work effectively. It feels like you fail 90% of the time trying to scroll vertically because the phone recognizes it as horizontal scrolling or both :smiley: (I’m not an expert.)

Here’s the link:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Your read link doesn’t work for me. First things first, is the body element set to overflow:hidden?

1 Like

I’m sorry, here is the read-only Link:

This disables scrolling on mobile if selected on the body element, if you set that to visible that should solve it

Screen Shot 2020-02-16 at 23.17.31

1 Like

Yes, that fixed the scroll issue. But now I got the horizontal scroll again that I cant seem to get off. I put everything in another div right under the body and set that to overflow= hidden but it doesn’t work

Another thing I noticed is that even though the body height is set to “auto”, the body extends further than the footer. That creates a weird space under the footer

Hmm, so the answer is not what you’re going to want to hear, there isn’t a quick fix. This is going to take quite a bit of reworking, you’re either going to need to stack elements more vertically or have them shrink so that nothing is outside the viewport horizontally unless you want that area to scroll sideways. A couple things I saw right away was a div set to 150vw, and content inside a 170vh section overlapping the footer. Unfortunately you’re just going to need to go through and debug all the content that’s overflowing both vertical and horizontal and make the site a bit more responsive

Good luck on your project, the design work is incredible!

1 Like

Thank you, okay I will look into it. It’s just difficult as I rotated the large colorful shape and therefore I have to extend the vw in order for it to work, else it doesn’t fill the full width :confused:

Anyway, thank you a lot Joel

You’re welcome and since that’s the case, what I’d try first would be setting the sections or a different parent div to overflow:hidden