Is there a way to set a different number of items shown in a collection for desktop and mobile views in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Yes, it is possible to set a different number of items shown in a collection for desktop and mobile views in Webflow. Here's how you can achieve this:

Create a collection list: Start by adding a collection list wrapper to your page. This will be the container for your collection items.
Set up your collection: Add the collection you want to display to the collection list wrapper. Configure the layout and styling of your collection item elements (e.g., text, images, etc.). Make sure the collection items are arranged horizontally within the collection list wrapper.
Configure settings for desktop: With the collection list wrapper selected, go to the Styles panel and navigate to the Settings tab. Here, you can define the number of columns you want to display for desktop view. For example, if you want to display 4 items per row on desktop, set the column width to 25%.
Configure settings for mobile: To set a different number of items for mobile, you'll need to use media queries since Webflow doesn't have built-in controls for this. Select the collection list wrapper, go to the Styles panel, and click on the plus icon next to the "Settings" dropdown. Choose the "New Media Query" option.
Add custom CSS code: In the media query, you can write custom CSS code to override the desktop settings. For example, if you want to display 2 items per row on mobile, you can add the following CSS code:

@media screen and (max-width: 767px) {  .collection-list-wrapper {    width: 50%;  }}

Adjust layout: Lastly, you may need to make further adjustments to your collection item layout for mobile views. Use CSS to modify the width, height, and spacing of the items to ensure they are displayed correctly on smaller screens.

By following these steps, you can set a different number of items to be shown in a collection for desktop and mobile views in Webflow.

Additional Questions:

How can I change the number of items displayed in a collection for desktop and mobile views in Webflow?
What are the steps to set a different item layout for mobile and desktop in Webflow?
Is it possible to customize the number of items shown in a collection for different screen sizes in Webflow?

What could be causing the image in my Webflow site to glitch out and lower itself when I set the section height to 60% of viewport height and the image and div to 100% parent height?

Is it possible to remove or resize the "built with webflow" banner that appears on the right side of my website when viewed on a tablet?

How can I disable scroll bouncing in iOS devices using Webflow?

Is there a way to disable zooming on a Webflow site for mobile users using a snippet of code?

How can I add code to track onclick events in Webflow?

How can I remove the duplicated embedded code on my Webflow site?

Why is the Contact Form the only one that is working while the other seven forms are displaying an error message when submitting data?

How can I add a success message to my Webflow form that says "Thank you, please check your email"?

In Webflow, how do I correctly write the classes and combo classes when using them in custom code? Is it important to use capital letters in the code if the classes or combo classes start with a capital letter?

What could be causing two specific images to keep disappearing on a website built with Webflow when the tab is closed and reopened in Chrome, and what is the workaround to fix it temporarily?