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 !
Here is my public share link: LINK
(how to access public share link)
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
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
- Same class as above but give it width of 50%, this will result in 2 columns
- Same again, but now you can go 100% width so it’s just one column
Let me know how you get on?
That’s awesome !!! Thank you @marsh !!
Just followed your technique and it works beautifully !
Thanks alot !