We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

2 column on Shopin Products

Featured Lock Resolved Task
Hello, I want to ask about Shopin Template. How do I change the Products list to be 2 columns in the mobile version?

Thank you.

Attachments (1)

  • Sample-1.jpg
    Sample-1.jpg 278.1 KB

7 Answers

Al Mamun - Staff

More than a month ago #Permalink
Hi,

Thanks, Can you please your website address with me. So, I can give you a css to do that.

Regards,
Mamun

Leedunk

More than a month ago #Permalink
Hi,

Thanks, Can you please your website address with me. So, I can give you a css to do that.

Regards,
Mamun


Here my website http://baliavo.com/tester
Please help me, thank you

Al Mamun - Staff

More than a month ago #Permalink
Hi,
Please add this css to your template custom.css file. Then let me know.

@media only screen and (max-width: 600px) {
.j2store-products-row .col-sm-4{
float: left;
width: 50%;
}
}


Thanks,
Mamun

Leedunk

More than a month ago #Permalink
Hi,
Please add this css to your template custom.css file. Then let me know.

@media only screen and (max-width: 600px) {
.j2store-products-row .col-sm-4{
float: left;
width: 50%;
}
}


Thanks,
Mamun


Thank you very much, succeed, but there is still a problem, there is a separate product like in the picture below. Every 3 products then they are separate.
How to solve it?
Please help me.

Attachments (1)

  • Screenshot-2018-6-23 Men.jpg
    Screenshot-2018-6-23 Men.jpg 75.3 KB

Al Mamun - Staff

More than a month ago #Permalink
Hi,
In this case you need to remove previous css add this css also make sure you have 4 row to show otherwise it will keep space in right side of the last row. You know we can't divided odd number without fraction.

@media only screen and (max-width: 600px) {
.j2store-product-list .col-sm-9{
padding: 0;
}
.j2store-products-row {
float: left;
width: 50%;
margin: 0;
}
}

Regards,
Mamun

Leedunk

More than a month ago #Permalink
Hi,
In this case you need to remove previous css add this css also make sure you have 4 row to show otherwise it will keep space in right side of the last row. You know we can't divided odd number without fraction.

@media only screen and (max-width: 600px) {
.j2store-product-list .col-sm-9{
padding: 0;
}
.j2store-products-row {
float: left;
width: 50%;
margin: 0;
}
}

Regards,
Mamun


I've tried and succeeded, but I want to ask one more time, I'm sorry because I'm a newbie.
I did not find any changes to the product on the homepage (only on home). Please help me. Thank you.

Al Mamun - Staff

More than a month ago #Permalink
Hi,
For the homepage please add this css.

@media only screen and (max-width: 600px) {
.j2store-product-module-list .j2store-module-product.col-xs-6 {
width: 50%;
min-height: 220px;
}
}

Hope it will fix that problem.
Thanks,
Mamun


There are no replies made for this post yet.
Be one of the first to reply to this post!

126

Templates

333675

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us