How To Have 2 Columns For Product List On Mobile?

Store Design
1

Hi,

on my website unclesamsroad.com, when I go into one of my collections on mobile view, there is only one column showing all the products.

I would like there to be two columns showing the product, but I am unable to do it.

Any advice or code I should add?

Thanks and best regards!

Juan23_0-1696676624983.png
Juan23_0-1696676624983.png647×886 253 KB

2

@Juan23 , Hope you are doing well.

Please add the below line of CSS at the end of your responsive.css file.

@media(max-width:767px){
.collection .product-grid .grid__item{
width:50% !important;
max-width:50% !important;
}
}

Hope this will help you.

1 Like
3

Hey @Juan23

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1696683525319.png
Moeed_0-1696683525319.png382×676 94.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like