Collection List product layout needs to be custom for mobile device breakpoints

Community resources Product feedback
1

Hey everyone,

I am using a collection list to populate my list of products for Category pages. I use a 4 column setup. For mobile landscape and portrait, it displays them to a single column or an image per row. I would like it so that they display two images per row (two columns). When I change that, it affects my desktop and changes it from 4 column to two. It looks like that the breakpoints for devices is not respected for collection list layouts. Any quicker solutions around this than making a 2nd layout and creating a second collection list just for mobile displays and hiding each component?

2

Try flexbox and create any layout you want (On mobile). For un-even layout, you should use custom code.

https://webflow.com/blog/designing-dynamic-lists-with-flexbox

Add read only link + Screenshot of the problem to get a more specific answer.

I agree it could be great to get more control on collection list by the UI (Like columns).

Vote for this idea:

Display Collection List in Grid (Related)

https://wishlist.webflow.com/ideas/WEBFLOW-I-1826

1 Like
3

Siton you are the bomb!!! :slight_smile: You just solved my problem and it works great!:raised_hand_with_fingers_splayed: Thanks!

1 Like
4

Great! Mark as solution to close this topic