Streaming live at 10am (PST)

Weird overflow bug over max-width with sticky section

In my sticky section with the video, under “zero work. complete control”, the sticky section is causing there to be a scroll bar to the right which shows a small gap of white space for the whole page.

I tried troubleshooting this and the only thing I can find that fixes it is selecting invisible/auto on overflow for the sticky section (and the sections/divs which contain it). It gets rid of the space but it also ruins the sticky section and disables it’s “sticky” functionality. How do I fix this? Please help me…


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

Here is my published site: https://flashfeed.io
https://i.imgur.com/AEThjHM.png

Hi! The “zero work. complete control” section is really nice!

I do not see the problem you are mentioning.

Would you take a screenshot of that?

As you can see, the right side shows some white… It shows on my phone as well. And thank you for the compliment!!

Thanks for the screencap.
haha… I really do not see this on all browsers ( Chrome, Firefox, Safari on Mac + Edge on Windows ).

But here are a few steps to see if it solves it or not:

  • .HOW_IT_WORKS … width and max-width: 100vw or 100%
  • and the 3 levels of divs within … width: 100%
  • .section-sticky__wrap .section-sticky__wrap-progress … height: auto; min-height: 500vh

It is just guesswork as I cannot publish and test.

Hope it helps.

Oops🤣 I see that on Edge now, only on Edge.

I have to scroll to right in order to show it.

That’s interesting. Taking a closer look at it.

@Evan_Joyal
hey, ya, taking the steps I said above will probably solve the issue.

To secure further, you could do this as well:
.wrap__sticky .sticky .sticky-5
remove margin: 0 3%;
and change to width: 100%, padding: 0 3%;

Thanks a lot! I tried it and changing everything to 100% instead of 100vw fixed it it seems, but the final 2 mobile views are still not working…

@Evan_Joyal
hey, ya, taking the steps I said above will probably solve the issue.

To secure further, you could do this as well:
.wrap__sticky .sticky .sticky-5
remove margin: 0 3%;
and change to width: 100%, padding: 0 3%;

I found out how to fix it. Thank you for your help! I combined what you suggested with some intuition to fix the problem.

1 Like