Streaming live at 10am (PST)

How to make a paginated collection list responsive across all devices

Hi there,
I have created a paginated collections list for the 5 products (3 on the first slide and 2 on the next slide) on my website and it works beautifully on web but as soon as I go down into the smaller devices everything gets crammed down. I can adjust the pagination to show 1 item instead of 3 at a time and that works well on mobile but then when I go back to web the list is still showing 1 item at a time.

I am not able to adjust the number of products shown to each resolution … how do I make it so it’s responsive - showing 3 items at a time on web, 2 items at a time on iPad and 1 item at a time on phone.

read-only: https://preview.webflow.com/preview/luibh-skincare?utm_medium=preview_link&utm_source=designer&utm_content=luibh-skincare&preview=d88d2532f943bd3109a3d1c1a76659c0&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hello Sonia,

At the moment I do not think that what you are trying to achieve is possible using standard procedures. Only thing wee could think of is actually just using multiple Collections ( 3 at your case) where you would make one paginated with 3 items per page, another one with 2 and final with only 1 per page and based on viewport show only one that you want while hiding the other two. However this might not be the most optimal solution since that will make your website show a bit slower speeds on Page Speed Tests.

Also a couple different things you could do are using custom code to make pagee have seamless transitions when using pagination rather than jumping to the top whenever you click next button. You can read more about that on here:

Or use Finsweet libraries to avoid using pagination completely but that would require you to change your layout in order to utilize those functions as intented, so I am not sure if that is something you would like.

Webflow Experts at Flow Ninja Support Team!

Okay I see - thanks for the help. I followed a webflow tutorial to make it and I think I used some kind of code so it is seamless at this point.

I have been struggling for a while now to showcase my products in a slider - at first I created a slider and that worked well until I had to make it into a collection … so I gave up on that and did it this way instead.

Very frustrating. I will try out this Finsweet libraries thing if you think that will work better? Is it a plugin for webflow or ?

Hey Sonia,

Glad to be of help! If you are interested in using CMS with sliders ( since that is what you started with) you should check out FinSweet CMS Slider. You can read all about it here: https://cmsdocs.webflow.io/slider. and also here you have detailed walkthroughs on how to do it. They have a couple different interesting things regarding CMS, you can use this or find something else that works better for you.

Ah amazing! Thank you so much - i appreciate it :slight_smile:

1 Like

@soniamichalina were you able to make your CMS pagination responsive across devices - showing 3 on desktop, 2 on tablet, and 1 on mobile? If so, how?