Hi guys
Hope you are all well.
I would like to know if anyone can help me with making my site’s collection cards 5 wide for desktop but only 4 wide on the mobile site?
Is there a CSS code I can insert into “custom css” for just the mobile component?
Cheers
Martin
Hi @SeoulSurvivor ,
Can you provide link to your store?
Wait I should have been clearer in my initial email - I meant 1 collection with 5 products on the desktop but on mobile site 1 collection with 2 columns 2 products wide.
I hope this make better sense.
Regards
Martin
Hi @SeoulSurvivor ,
As per my understanding you want the desktop view to show 5 products in a row. The mobile view is already showing 2 products per row.
You can add below code at the end of theme.liquid just above
{% if collection %}
{% endif %}
Thank you
Hi Makka
Thanks heaps for that - apologies for the delay in reply, was crook (sick) yesterday.
Can I confirm that the code is for 5 columns on desktop and 2 columns of only 4 products on Mobile not 5?
Also what if I wanted each collection to have 5 columns with 2 rows (10 products total) and still only 2 columns of 4 products on mobile?
Thanks in advance - and I will definitely buy you a coffee 
Martin
Hi @SeoulSurvivor ,
The code will make 5 columns on desktop and 2 column on the mobile device. This should work on an all the collection pages.
{% if collection %}
{% endif %}
Preview: