▼
Streaming live at 10am (PST)

Weird overflow bug over max-width with sticky section

Design help General
#1

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

#2

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?

#3

image
image1920×937 129 KB

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

#4

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.

#5

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.

#6

@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%;

#7

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