Overflow issue?

[SikosTeam]

Hello everyone! I am in the process of designing my first website on WebFlow and I am absolutely loving it. I have ran into many issues, most of which can be solved with some YouTube and a few hours of work. This one in particular has me stumped.

If you take a look at the site you will notice that the right palm leave is overflowing the webpage causing a horizontal scroll bar which I would not like. I set the overflow on the parent element as well as the child to off and it seemed to work for the left palm frond but not for the right one… Any ideas?

UPDATE: The issue does not exist on the read only link… Check the published site here:
https://s-k-o-media.webflow.io/surfdurt

https://preview.webflow.com/preview/s-k-o-media?utm_medium=preview_link&utm_source=designer&utm_content=s-k-o-media&preview=a76d734422df8d9d2cf943f6ab9b949b&pageId=62141798d7ffcdea038d4745&workflow=preview

[vincent (Vincent Bidaux)]

Cool palms

Overflow is a mask function. When set on an element, it is masking any child element that goes passed its boundaries.

So, you’ve set overflow on the palm elements, but you have to set it on one of their parent element. For instance, here, you can set it on the Section25 element.

PS never set overflow hidden on the Body element.

[SikosTeam]

Hey Vincent! Thanks for the help!! I just tried your instructions and it still appears to be giving me issues. Especially on the published site. It may be worth mentioning that the fronds are animating off the screen?

[vincent (Vincent Bidaux)]

Ah ok, it is because your PLANTS are POSITION ABSOLUTE. So they are positioned depending on their CLOSEST POSITIONED PARENT. Meaning a parent that has any positioning EXCEPT STATIC.

And the closest positioned parent of your plants is the BODY, so they escape the Section 25 overflow mask.

Fix : position the Section 25 element. Select it and pass it to POSITION:RELATIVE.
`That’s it.

[SikosTeam]

Thank you soooooo much!!