Is there a way to set a different number of items shown in a collection for desktop and mobile views in Webflow?
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?