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

Design help CMS
1

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)

2

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
    image1550×687 375 KB

3. Tablet:

4. Mobile

Let me know how you get on?

Thanks

13 Likes
3

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

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

1 Like
4

I know this is very old, but was wondering if this is still the only “workaround” to achieve this? One would assume that column settings would work the same way as other settings - propagating downwards based on the breakpoint you set them to.

Thanks!