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:
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.
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.
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?
