Minoumax
March 16, 2021, 6:04pm
1
Hi, In this test site everything is fine (for the moment) except that in one of the elements (Foggy-inf), I applied an animation (Scale) which shows a horizontal scroll, but all the elements have Overflow Hidden applied .
If I remove the animation (scale) it works fine.
Why?
Here is my public share link: https://preview.webflow.com/preview/uniko?utm_medium=preview_link&utm_source=designer&utm_content=uniko&preview=5416790bd5a3d714a4c6ad1db0e30602&mode=preview
Loom video: https://www.loom.com/share/7dded0b13c354b7db534e63302114142
mikeyevin
March 16, 2021, 7:41pm
2
Welcome to the community @Minoumax !
Your position: absolute setting is more than likely the issue here, as it takes the element out of the document flow and negates the hidden overflow property that you’re setting.
Try setting the foggy image container to position: absolute with hidden overflow but keep the image inside as static. You may need to play around with the sizing of the container after you change those settings but it should hide any horizontal overflow on the page
Minoumax
March 17, 2021, 7:52am
3
Hi! You are my hero!! ja ja
I had not thought of it! Indeed there was the solution, thank you very much!
The community is 50% of Webflow
1 Like
mikeyevin
March 17, 2021, 5:34pm
4
Glad I could help out! Looking forward to seeing how you use that setup on a future project, the effect is rad
Tom5
March 17, 2021, 5:42pm
5
Hi Mikeyevin,
I also have a similar problem, Can’t figure out why my homepage is overflowing and enabling horizontal scroll, are you able to take a look?
Hi there.
My homepage is appearing wider than the screen size, but I swear I’ve checked everything and all elements are set to 100vw. Can’t figure out why this is occurring and it is creating an annoying horizontal scrollbar.
Can anyone see why this is happening? doesn’t show up in the designer, just on the published site - it also doesnt occur on mobile which is why i’m assuming it’s either the background video or navbar as these are hidden on mobile.
Site:
Read only:
https://preview.webf…
mikeyevin
March 17, 2021, 7:04pm
6
Just gave my .02 over in that thread, but I’ve included my response below for anyone who stumbles upon this thread:
Just swinging by here after the ping in the other horizontal scrolling thread.
I wasn’t able to completely remove the horizontal scrollbar as there are a number of problem elements, but it looks to me like it’s your use of VW units for the width of your elements as opposed to %. Make sure that you’re using width/max-width: 100% on your full-width elements as VW units don’t take into account the scrollbar.
If you clear out all of those it should remove any horizontal overflow
