Infinite slider causing horizontal scroll

Design help Layout & Design
1

Hi everyone,

I’m currently faced with the typical horizontal scroll issue. On the page “Doing Good”, I have a custom infinite slider which caused the page to have a horizontal scroll (this is clearly shown on the published site).
I don’t know how to solve this as having the page body overflow: hidden would cut off all my overflowing elements on all pages.

Any help is greatly appreciated.

Here is my site Read-Only: Webflow - e46

Here is the published staging site on the problematic page: Short course: Doing Good

2

Not sure what this means, unless you’re wanting horizontal out-of-bounds scrolling on some pages?

One option is to fix your body so that it crops overflow-x. Your swiper script should still bring your elements into the viewing frame just fine.

Another option is to redesign your page so that the swiper section is a full 100% width, and crop that section only.

3

I do not want any page to have horizontal out-of-bounds scrolling. Sorry my wording was weird.

One option is to fix your body so that it crops overflow-x. Your swiper script should still bring your elements into the viewing frame just fine

how do I do this? Can you please elaborate?

4

The basic CSS is something like this;
I’d just add a class to body and set the overflow-x under custom styles at the bottom of the style panel.

html, body {
  overflow-x: hidden;
  width: 100%;
}
5

I tried this and there is no longer any horizontal scroll (yay). However, now every elements in that page is stretched out to the entire website and there were no margin (image 1)

image
image1797×1082 176 KB

When I tried changing the width to 80%, all elements sticked to the left and not centered (image 2)

image
image1804×1096 177 KB

I think the problem arise as I have my body margin 10vw so that every section is spaced in. When the style is width 100%, I think it override the 10vw margin and sketch everything out. When I set the width as 80%, I saw that the overflow elements is also cut off. You can check the other pages to see what I mean as I’m not sure how best to describe the layout. I have kept the “Doing good” page with the fixed setting you suggested for comparison.

Is there any other way to have all the overflow elements stay the same without cutting them off when removing the horizontal scroll?

6

Correct, this is where your design needs fixed. You’re wanting your slider section to go to the edges of the page, but most sections to be 80vw.

Normally the way you’d do this is by designing your page using a section and container concept so that you have margin and padding control per-section, rather than forcing it page-wide.

Personally I [almost] never put a class on the body element. Everything is at the section and container level.

If you’re still familiarizing yourself with HTML layouts and the box model, the Webflow U has some great tutorials with walkthroughs that will help you understand the pieces you’re building with more deeply.

1 Like
7

Thank you for your help. I have change the back to the default body and apply it at the section level. The custom property you suggested then worked perfectly!

1 Like