Optimizing Webflow Responsiveness: Limiting Collections Across Devices
As a Webflow user, there might be times when you want to limit the number of items shown in a collection depending on the type of device being used. This is particularly relevant when considering the user experience on mobile devices versus desktop displays. Your users may not want to scroll through numerous articles on their phone, but they may need to see more articles when they're on a desktop view. Unfortunately, setting the limit in the collection's on-page settings applies the limit across all device versions, which may not be ideal for your responsive design needs. So, how can we solve this? Let's dive into it.
Problem: Limiting Collections Across Devices
The issue arises when you set a higher limit for the desktop view and a lower limit for the mobile view. For instance, you might set the desktop version’s collection limitation settings to show only 20 articles. Then, you go down to mobile and set the collection to show only 6. However, when you go back to the desktop view, all articles are showing only 6. This is because the settings cascade down and not up. This functionality can be a roadblock when trying to create a responsive design that caters to the needs of users on different devices.
Solution: Optimizing Webflow Responsiveness
There’s a handy trick to this issue. Here's a step-by-step guide:
- Duplicate the collection on the desktop view
- Rename the duplicated collection (so that you can change the limitation settings)
- Change the limitation settings to the lower number
- Hide the duplicated collection on the desktop view, show the original collection on the desktop view
- Go to the mobile view. Show the duplicated collection on the mobile view, hide the original collection on the mobile view
This method allows you to show a different number of items on the desktop and mobile views. However, keep in mind that this method increases the 'collections allowable on-page' cap and can be a bit time consuming, so it might not be a long-term solution.
Another solution could be to add the collection to the Desktop in settings only. Then, go to Tablet and create the collection with a different class name. This way, both will not connect and you can adjust the content because they can have the same styles, but the wrapper or divs won’t.
Additional Information
Note that there's a max limit of 100 items per Collection list and 20 Collection lists per page unless pagination is enabled. You can choose to display more than 100 items by enabling pagination. If you want to know more about this, you can check this guide.
Hoping for a more permanent solution to this issue? There's a feature request for it on the Webflow Wishlist. Feel free to vote it up so that we may have a better solution for this in the future.
Pro Tip: Use Conditional Visibility for a Sleeker Solution
Here's an advanced tip that can take your Webflow design to the next level. Conditional visibility is a feature in Webflow that allows you to show or hide elements based on certain conditions. This feature can be a more efficient and cleaner solution to our problem of limiting collections across devices.
For instance, you can create two separate collections - one for desktop and one for mobile. Then, use conditional visibility to show or hide these collections based on the viewer's device. Here's how you do it:
- Create two separate collections, one with a higher limit for desktop view and one with a lower limit for mobile view.
- Select the collection you want to hide/show, and go to the settings panel.
- Under the 'Conditions' tab, click the '+' button to add a condition.
- Select 'When device type is...' from the dropdown menu, then choose 'desktop' or 'mobile' depending on the collection.
- Set the condition to 'visible' for the chosen device type, and 'hidden' for the other.
This way, you can have different collection limits for different devices without the need to duplicate collections or create separate classes. Remember, conditional visibility is a powerful tool in Webflow, and can be used for a wide range of other applications in your design.
