Streaming live at 10am (PST)

Responsive grid not lining up


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?


Here is my site Read-Only:
(how to share your site Read-Only link)


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


I’m manually resizing.


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.

closed #5

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