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.
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: https://imgur.com/a/LdyiMNt
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.