Horizontal scroll on mobile home page

Hi, my website is scrolling horizontally on Mobile, I have been trying to fix it but I can’t and it seems to only be happening in the homepage. Can someone please help me?


Here is my site Read-Only:
https://preview.webflow.com/preview/segven?utm_medium=preview_link&utm_source=designer&utm_content=segven&preview=15a7afc3af6e183588dd73c1bb726243&mode=preview

Published link: https://segven.webflow.io

You have a few elements on the home page that are set to 130%.
This is causing the page to scroll horizontal.

  • You can bring it down to 100%
  • Or you can set overflow hidden to the section.

I hope this helps :slight_smile:

Hi, I just changed the ones I saw with 130% to pixels. Why is it still doing horizontal scroll?
I thought that I already had all the sections in hidden overflow, did you see that? I tried putting the body in hidden overflow but then it doesn’t let vertical scroll. Please let me know!

Hi Peter,

First up, Welcome to Webflow and the Webflow Community, lot’s of willing helpers here to assist.

Looking at your site there are a number of things that can compound on each other that have unexpected results on different breakpoints.

A couple of things I noticed as per images below.

When designing responsively, we try not to use definite pixel heights or widths for elements (there are times when we do, but we try and use responsive units like %ages, VW/VH, em’s/rems etc in most cases)

I see that you have a text block with a width of 300px, so with padding, margin etc from other elements, a 320px wide viewport will automatically need a horizontal scroll.

There are a number of things going on with margin/padding settings across your breakpoints, so changing some can have a flow on effect and cause other unexpected results.

If you need some other direction or assistance, feel free to contact me directly.

Regards,
Keiran

Hi, how do I contact you?

Hi Peter,

you can contact me directly via direct message.

I’ll contact you.
Keiran