Grid looking strange in Firefox

I just finished my personal site, and everything looks good on Chrome, Edge and Safari.

But for some reason the grid looks completely out of control on Firefox, and I have no idea why:


Here is my site Read-Only: Link

@designor Did you by any chance applied grid directly to webflow’s default container? I am asking this because same thing happened to me but with flex box, it was out of place in both firefox and safari, I removed flex from container and created a custom div instead and it worked.

Only standard divs are used for grids, I haven’t used any containers. But thanks for the suggestion.

1 Like

hi @designor you should not use images without its wrapper. So the simplest solution is to wrap each image in div and optionally add to div tag figure after adjust CSS to it as I saw some CSS settings that should be solved. like eg. instead padding or margin and image width you should use Grid gap instead.

m2c

It seems like adding a div wrapper to the element with no properties solved the issue.

Hi @designor this is what I have recommended. Sorry to see that you didn’t find my response as solution to your request.

Have a good day

Sorry about that, I misunderstood how you had written the solution. It has been change to the solution :+1:

1 Like