Hero Elements Overlapping

Design help General
1

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

1832×749 1.65 MB

1479×863 949 KB

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?

1806×946 222 KB

1471×990 197 KB

Thanks in advance.

Greer

2

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

3

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

1893×1253 320 KB