Animated images stretching display area on mobile

Design help General
1

Hi! I have some images that animate in on my home page. They display off-screen before they animate in just fine on desktop but on mobile both in webflow and in my live website. But in tablet, mobile vertical and mobile horizontal mode the elements that are off screen before they animate in cause the whole website display area to extend out, showing those hidden elements. This only happens on an actual device, not in webflow designer. What gives?

Website is cunetto.webflow.io, live, share link below.

Screenshot from an iPhone 6S Plus:

1242×2208 1.11 MB

Here is my public share link: https://preview.webflow.com/preview/cunetto?preview=ae0b5126cdbbb88d9d1b3b2a535246ab

2

Hi @Christopher_Cunetto

In mobile view set overflow: hidden for " Hero Umbrella" section. Should help.

240×616 21.5 KB

Cheers,
Anna

3

Thank you!!!

Perchance you do you know how to prevent horizontal scrolling (revealing white space) on mobile and tablet devices?

4

Just avoid elements sticking out of body/screen width.
You can do this by set overflow: hidden to the sections (divs, containers) which contain bigger images or elements, or check the elements width itself.

5

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