Responsive Webflow Template is not working now that I've modified with my design?

Hello,

I’m building a new website for my family’s service dog business. I’m new to Webflow, so I opted to purchase a template called “Toybox”. I’ve been working to modify this template by simply adding my content. All is going well, except that I’m noticing that mobile and tablet devices are not scrolling properly, when compared to the original Toybox template.

When scrolling on my iPhone 11 Pro, for example, I am noticing that the page is not fixed and it allows for the page to move right to left, as if the page is not formatted to be responsive.

Can anyone tell me what I’m missing? I’ve compared settings with Toybox template and I’m not seeing why this is happening.

I appreciate anyone’s time and assistance with this.

Best,
Joshua


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

Howdy @Collective_Vibration and welcome to the community :wave:

The issue here (or at least, the one I found) is the button within the “Collaborative by Nature” section—it’s got a fixed width that’s pushing it’s wrapper wider than the viewport within the Tablet breakpoint:

I’d recommend swapping that style to the max-width field instead so it can shrink when necessary on smaller screens :+1:

Hello Mike,

I appreciate your prompt response. Based on your recommendation, I made the change to max-width. That said, the issue is still present. This is issue isn’t just on the homepage. Once safari loads the page fully on the iPhone, the page isn’t fixed in a vertical scroll position, rather it becomes sloppy allowing for the page to move around with right/left scrolling.

Is there anything else that you can see?

Thank you,
Joshua

Horizontal scroll is an indication of elements wider that the screen. A common way to avoid it is to place all the page contents (all elements) in a wrapper div that has overflow set to hidden. Or you could find the overflowing element(s) and make adjustments.

Hello Jeff,

We were able to find the overflowing elements in the pre-built footer that came with the template. If you check it now the problem should be resolved. Thank you for your input. It’s good to know the shortcut in wrapper div with overflow set to hidden.

Best,
Joshua

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.