CMS collection's list breaking in 3 column

[adnan (Adnan Abbasi)]

Hello there, my CMS list 3 column is breaking on some pages

How to correct that?

Here is my public share link: LINK

[Fonsume]

Hey Adnan. I took a look at your site!

This problem is a common one, and one I’ve battled myself. It sucks, but there’s an easy fix:

Select the collection list:

Then change the settings to use full width instead of three colums. This will make things look weird, but we’ll fix that:

Now (still on the collection list), change the display style to Flex and select “Wrap” on “children”:

Everything looks weeeeird, but that’s ok. Let’s go to the news-small collection item:

Set the width to 33.33%:

Result:

Then add a bit of padding so the elements don’t stick together:

Result:

Hooray!

Ah, but now the mobile portrait looks weird:

Easy fix too, just change the news-small collection item width to 100% and it goes back to normal

[adnan (Adnan Abbasi)]

Thanks duh it worked

[Fonsume]

No problem! Happy designing