Community forum for knowledge and support

Updated 10 months ago

Fixing Squished Grid Items on Smaller Breakpoints

At a glance

Hey, I'm using Layout 414 and having some trouble with some items in the grid list being squished on smaller breakpoints. Here's a screenshot. The Italian and French flags are smaller than the others.

I've seen a T.RICKS video before where Webflow grid that auto-generate 12 columns can have this issue. I can't remember how to fix it though. Any help would be greatly appreciated!

M
E
3 comments

hmm yeah that might be a possibility - hard to say without a read-only link but another thing to look at is the lazy load and making sure its set for eager loads with page - since these are scrolling off canvas. If its at the top of the page, its less likely the issue - but if its further down the page, most likely the issue.

If you want to send a long a read only or DM it to me, I can poke around more though.

Interesting, I wouldn't have that the loading attribute would affect it!

I managed to fix it by setting a min and max value for each column and auto-generated column, where the min is a rem value and the max is 1fr. It works great but it's a bit slow because I had to set four values per breakpoints (as this layout is made of two grids)

yeah you and me both - had it catch me off guard on a couple of other issues in the past. Glad you got it resolved!

Add a reply
Sign up and join the conversation on Slack