Evan_Joyal
(Evan Joyal)
February 8, 2021, 5:03am
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
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?
Evan_Joyal
(Evan Joyal)
February 8, 2021, 5:38am
3
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%;
Evan_Joyal
(Evan Joyal)
February 12, 2021, 3:34pm
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