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.


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