Help: Grids malfunctioning on mobile views

Design help General
1

Hello, my grids are spaced properly on webflow designer preview and desktop responsive view. But when I view them on my phone or tablet, the grids cells get super spaced out and everything starts pushing into each other. This is happening on other pages in my website as well.

Thanks for the help!

Webflow Mobile preview:

unknown
unknown797×1735 87.3 KB

iPhone View:

IMG_0559
IMG_05591170×2532 412 KB

iPad View:

IMG_0461
IMG_04611668×2388 145 KB

Here is my site Read-Only: https://preview.webflow.com/preview/nchen-website-2?utm_medium=preview_link&utm_source=designer&utm_content=nchen-website-2&preview=3b5c94567df3ba8b6a1bf4d05c8ccccc&pageId=61edccc98cb41f19f6920330&workflow=preview

Live Site: Butterfly

2

Hey @nchen

This issue is happening on IOS Devices, probably mac Safari as well because when you place images in grid you can’t just set them to be 100% height due to them having no idea what 100% height is if they don’t have any reference for it. Just switch all of the images to be like 150px high and see if it improves things.

Let me know how it goes, cheers!