Streaming live at 10am (PST)

Responsive grid not lining up


#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


Here is my site Read-Only: https://preview.webflow.com/preview/camargue-underwriting-managers?preview=3325646028e082d176394ad151ead745
(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.


#5

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