How to force to have 2 columns of products displayed in a category – mobile ?

My shop : https://www.woolsome.shop/product-category/wool-fabrics/wool-medium-diamond/

There is a place in a dashboard to setup in how many columns my products will be displayed in a category listing .
On mobile I can choose between 1 or 2.

I press 1 .. I receive 1 column
I press 2 .. I receive 3 columns , instead of 2 :////

Please help me to get 2 columns only.

Hello,

Your issue is caused by the Custom CSS you added in the Custom CSS for Mobile area.

Screenshot for Clarification: https://gyazo.com/f433fdd0a246167df99a77fcf331a8ec

Please remove the CSS. Then it will fix the issue.

Best Regards

Ah I see.

I have added this CSS part for MOBILE ONLY to get RELATED PRODUCTS seen in 4 columns on the PRODUCT CARD.
Please check it here for example (ON MOBILE)
https://www.woolsome.shop/product/wool-diamond-grey-white-wd-06-02/

These small related products are now in 4 columns.

I did not catch that it will also affect main products on the category listings.

So I will reverse the original question :

How to serve related products in 4 columns and not touch category listings ?

This is my code:
/* related products 4 columns */
.col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 0%;
max-width: 30%;
}

Thank you in advance

Hello,

You are Most Welcome.

Please replace your code with the following then check back.

.related-products .col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 0%;
max-width: 30%;
}

Best Regards

Thank you for fast response.

Now I understand my mistake 🙂

Hello,

We are Glad that you loved our Theme and Support Staff. We wish you all the best.

If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

Thanks for contacting us.
Have a great day :-)

Topic Closed.
Best Regards.

[Author]

Posts