Can't get rid of Horizontal scroll with overflow hidden

Community resources General
1

Hello,

I am currently working on a portfolio project and got in a problem.

I can’t get rid of horizontal scroll and I tried a lot of things, I don’t even know what section is the problem, I delete section by section till there’s one left, and there would still be the scroll, then I would delete that section and again the scroll is there.

In Webflow designer everything is smooth and good while on the live website there is the horizontal scroll and the project sticky scroll section at the end is bugged.

The website is far from done but I can’t wrap my head around this problem.

If someone can help I would be very grateful, Thanks.

Here is my read only link: Webflow

Here is my live site: Website

Kind Regards

2

Hi Amer,

If you make the bento-wrapper-cards div over flow hidden it will stop the side scrolling, however it also locks out the information. Essentially your bento-wrapper-cards are a fixed width (rem) is too wide for anything smaller than desktop. For a more responsive size for this div try using VW or % and it will scale to screen size better. Good luck!

Screenshot 2023-11-29 at 12.07.39 PM
Screenshot 2023-11-29 at 12.07.39 PM2584×1858 374 KB

3

Hello, that’s not working, i got rid of every rem size in this section and put overflow hidden, it still doesn’t work.

I only care that horizontal scroll doesn’t show on bigger screens, I will do the responsive part later and that’s not a problem.

Thank you for your help!

In Webflow
In Webflow1921×929 140 KB

On Live site
On Live site1915×931 70.2 KB

4

Thanks for the information.

5

Hi Amer, I don’t get any horizontal “bleed” or scroll on larger sizes when I look at it, only on portrait mobile, so it’s simply a matter of chasing it down. In the recent work section above the bento section - I made wrapper project div overflow hidden and that worked. In the dev phase you’re in now I like having these overflows visible so I can see what still requires resizing. Hope this helps?

6

Hi Scott, thanks for helping, but it sadly didn’t work for me.

I fixed it using some custom code:

<style>
/*width*/
::-webkit-scrollbar {
  width:0px;
}

/*track*/
::-webkit-scrollbar-track {
  background:transparent;
}

/*thumb*/
::-webkit-scrollbar-thumb {
  background:transparent;
}
</style>

This works for now.

Thank you again for helping.

2 Likes
7

That code worked for me as well, Thanks for sharing!