Increase number of columns in mobile collection/product list

[WVU]

Hi there,

I'd like to display 3 products next to each other on the mobile version of my webshop.
Right now, only 1 is displayed. I'm not too sure which code to add/change in order for me to fix this.

Link to store: https://utrecht-winkel.nl/

Example pic:

Thanks a lot! 🙂

Kind regards,

Teun

[Moeed · Accepted solution]

Hey @WVU 

Displaying 3 products in one row on mobile wasn't looking good so if you wanna display 2 then,

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.collection-listing .product-list .product-block {
    width: 50% !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[Moeed · Accepted solution]

Hey @WVU 

Displaying 3 products in one row on mobile wasn't looking good so if you wanna display 2 then,

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.collection-listing .product-list .product-block {
    width: 50% !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[WVU]

Thanks a lot Moeed, this is awesome!

One more question; which code should I adjust to smaller the font size of product title and product vendor a bit? 

[Moeed · Accepted solution]

Hey @WVU 

Remove the previous code and try this updated code.

<style>
@media screen and (max-width: 767px) {
.collection-listing .product-list .product-block {
    width: 50% !important;
}
.product-block__title.t-left {
    font-size: 1rem !important;
}
.vendor.t-left {
    font-size: 13px !important;
}
}
</style>

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

Best Regards,
Moeed

[Rahul_dhiman]

Hello @WVU 

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> styles.css --->line number 6390
search this code.

@media (max-width: 767px) {
.collection-listing .product-list .product-block {
width: 100% !important;
}
}

and replace with this code.

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

 result

If this was helpful, hit the like button and accept the solution.
Thanks