▼
Streaming live at 10am (PST)

Limit collection items per row?

#1

Aside from setting a fixed pixel to the container is there a way to limit the number of collection items on a row? See how there are 4 on top and 2 on bottom, I’d rather 3 and 3. I can do it by setting 1200 max pixel to the container/section but there must be a diff way?

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

#2

You can assign a percentage to the collection item to override the settings in the panel. If you style the collection item div, you can set it to be 33.33% width and it will follow that instead. Hope that helps.

#3

I had this same issue and when I tried setting the collection item div width to a %, it worked fine on desktop, but looked bad on mobile and wasn’t truly responsive.

I found that using a Flexbox was the solution. Try the following:

  1. Set your Collection List Div (Not the Collection wrapper) to display as Flexbox and select wrap children
  2. Set the Collection Item Div which is now a Flex Item to have a Basis of 33.3% (Click the little gear icon under the flex item display settings)

This method made sure that the Collection Items wrapped on smaller devices.