Responsive grid not lining up

Design help General
1

Hi There

For some reason my grid, when i scale my browser window, is not aligned so some of my blocks go out of wack. This looks fine in designer, its just when i preview the site on my browser it looks funny.

If i play around with the window size it seems to come back into alignment. But obviously i can’t expect the user to do that.

Any ideas?

Thanks

39
392324×1516 236 KB

Here is my site Read-Only: Webflow - Camargue Underwriting Managers
(how to share your site Read-Only link)

2

Are you doing the resizing manually to the browser upon preview? Or are you clicking minimize?

3

I’m manually resizing.

4

When collection items don’t have a specific height value, each item might have a different height because of the different content within the item. This can push some columns in the grid creating a gap.

To fix this, you can create equal height columns using flexbox. Here’s how:

  • Set the display setting of the Collection list to flex
  • Check the Wrap children checkbox

The Align:Stretch setting ensures that your columns have equal heights and do not create those gaps again.

3 Likes
5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.