(SOLVED) Set Collection List's columns based on breakpoint?

Hi there,

I was wondering if there was a way, to set the number of columns of a collection list based on the webflow breakpoints (desktop, tablet and mobile phones) ? I tried to change the layout setting of my collection list from three columns on desktop to two columns on ipad… it works great the ipad has two columns but when coming back on desktop, the desktop version kept the two columns layout.

Here a small screen video

read only link

Thank you ! :slight_smile:


Here is my public share link: LINK
(how to access public share link)

Hi @anthonysalamin

I imagine there’s a few different ways to achieve this. Here’s how I would do it based on what you have created already…

1. Set the Collection List layout to full width
image

2. Style ‘Collection Item’ for Desktop:

  • Width of 33% (If you type in 100/3 and set width to % WF will auto calculate a thrid)
  • Float left
    image

3. Tablet:

  • Same class as above but give it width of 50%, this will result in 2 columns
    image

4. Mobile

Let me know how you get on?

Thanks

12 Likes

That’s awesome !!! Thank you @marsh !!

Just followed your technique and it works beautifully !
Thanks alot ! :slight_smile:

1 Like