5 Products on collection card for PC, 4 products on collection card for mobile...

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?

sure store link is https://mallsonline.com.au

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 :slightly_smiling_face:

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: