Grid set to 100vh images set to 100% height not displaying correctly on iOS

[isavedalex (Alex)]

Hey Everyone,

I’m pulling my hair out trying to resolve this problem, and I don’t know where else to turn. Any help or advice would be greatly appreciated!

I’m designing the following site with an Image Grid in the hero section.
https://jbj-studio.webflow.io/jbj-uxbridge

The grid displays correctly on desktop, as well as in tablet and mobile preview both within Webflow and Chrome. However, when I load the site on chrome and safari on my iPhone, it doesn’t look right at all.

In my document, I have a hero section set up with a grid inside. The grid is set to height = 100% and the Grid-Images are set to positon = area and height and width = 100%

When I view this on my desktop as well as the mobile breakpoint on my desktop and the chrome inspector, it looks absolutely fine.

Example gif of resizing fine on desktop: Webflow grid - responsive resize - Album on Imgur

But when I load the same page on iOS it appears like the first image in the grid is taking up 100vh of the entire page.

Scrolling down, the rest of the grid images are a mess and overlapping with the next section.

Please help! I’m so stuck.

Many thanks,

Alex

[Carlos_Ruiz_Del_Vizo]

Hi @isavedalex,

Try using DIV containers with background images, it will behave much better!

Let me know if you need any help,

[isavedalex (Alex)]

Carlos, Thank you so much!

I followed your device, and it’s working perfectly now. I really appreciate it

Alex