I want to take this collection of the collection list only on mobile because it’s uneven:
My URL is cheffings.net
Topic summary
Issue: A user wants to hide a specific collection button from their collection list on mobile devices because it creates an uneven layout.
Solutions Provided:
Solution 1 (theycallmemakka):
- Navigate to Online Store → Edit Code → theme.liquid
- Insert custom CSS code just above the
</body>tag - Uses a conditional
{% if collection %}block to target the specific collection - Includes a screenshot showing the implementation
Solution 2 (Dan-From-Ryviu):
- Add CSS to Custom CSS section via Online Store → Themes → Customize → Theme settings
- Uses a media query
@media (max-width: 749px)to target mobile devices - Applies
display: none !importantto hide collection list items with specific href attributes
Status: The discussion remains open with two different CSS-based approaches offered. Both solutions use mobile-specific targeting but differ in implementation method (theme.liquid vs. Custom CSS panel).
Hi @lukafernada ,
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just above tag
{% if collection %}
{% endif %}
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Hi @lukafernada
You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.
@media (max-width: 749px) {
li.collection-list__item.grid__item:has(a[href="/collections/other-kitchenware"]) {
display: none !important;
}
}