▼
Streaming live at 10am (PST)

CSS Grid erratic on iOS

Community resources Bugs
#1

Can anyone please help me figure out what’s going on?

Read only link here.

This page was working fine before I made some edits to a different page and now something broke with CSS grid on mobile. As far as I can tell, it’s not that I accidentally changed a style or anything. I did change the order of some child elements within the grid but AFAIK it shouldn’t be affecting anything.

The page previews correctly in Webflow mobile and on desktop when inspecting in mobile mode.

When viewing on my iPhone (Firefox AND Chrome) it looks like this:

IMG_F838D747F42C-1
IMG_F838D747F42C-1828×1792 209 KB

The discrepancy between the Webflow preview and the iOS version make it impossible to tell what I’m doing wrong. Is this a bug? I did see another topic on CSS grid issues, but that had to do with nesting CSS grid inside of a symbol, which is not the case here.

Greatly appreciate any help, thank you!

#2

Hi David, Did you get it sorted? When I first looked there were two columns and only one row adding a row to the grid fixed it. But i went back now and it all looks pretty good. But if IOS is giving problems you can always change the layout to block on mobile since all of the elements are stacked on top of one another. I find IOS can be a pain with flex and grid sometimes.

#3

Hi @Blanchard143

I;ve encountered similar issues before. I usually find that making grid 1x Column a lot easier to trobleshoot and resolve. Like screenshot below.

image
image465×1479 75 KB
image
image466×1473 63.3 KB

#4

Thanks for your help with this! I did make those grid tweaks but no luck- still fine in the preview and messed up on mobile.

However, I think I found the culprit. It looks like changing the grid’s parent from flex to block fixed it. I guess the combination of grid inside a flex container was the issue.

Is this considered a bug or did I just not use best practices when setting things up?