CMS collection's list breaking in 3 column

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


How to correct that?

Here is my public share link: LINK

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:
2020-06-23 23_59_03-Webflow - globalviews360

Then change the settings to use full width instead of three colums. This will make things look weird, but we’ll fix that:
2020-06-24 00_00_15-Untitled - Message (HTML)

Now (still on the collection list), change the display style to Flex and select “Wrap” on “children”:
2020-06-24 00_01_41-Untitled - Message (HTML)

Everything looks weeeeird, but that’s ok. Let’s go to the news-small collection item:
2020-06-24 00_02_53-Webflow - globalviews360

Set the width to 33.33%:
2020-06-24 00_03_49-Untitled - Message (HTML)

Result:

Then add a bit of padding so the elements don’t stick together:
2020-06-24 00_05_24-Untitled - Message (HTML)

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 :slight_smile:

2 Likes

Thanks duh it worked :smile:

1 Like

No problem! Happy designing :slight_smile:

1 Like