Hero Elements Overlapping

On my hero element, I have two elements in separate columns (text on the left and ball on the right). But on tablet and below, they overlap. Is there a way to correct this?

https://preview.webflow.com/preview/bok-unitedway-2015?preview=2a75bb53877e43a5ce938a26cf81edf5

Below the Hero element, I have a video that I’ve added using an embed widget. It looks fine on desktop, but on tablet and below it shifts to the right and is cut off. Is there a way to change it to position properly on tablet and below without affecting the size of the element on desktop?

Thanks in advance.

Greer

The columns of the row widget don’t overlapp: it’s your content that overflow outside the columns. You need to reduce/adapt the size of the text for each device. Also adapt the height of the hero section.

http://vincent.polenordstudio.fr/snap/vpw9y.jpg


http://vincent.polenordstudio.fr/snap/7lutn.jpg

For the red piggy, you have a container set to 50% that makes it this way

http://vincent.polenordstudio.fr/snap/tvhey.jpg

Vincent:
I got it fixed on tablet using your advice, but on phone it’s still cutting off …

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.