2 products per row on mobile !!

Hello @aldorg,

If you want to show two product in mobile view then you can try adding this in your Custom CSS for achieving that:

@media screen and (max-width: 750px){
.woocommerce .products .product {
    max-width: 50% !important;
}}

Hope that helps.

Thank you.

Hi, For this you have to create a child theme of the above theme. And then you change in media query for mobile view.

Hello @dalvinitesh2,

No, one do not need to create a Child Theme when adding Custom CSS codes. By default most of the themes have a field to add your Custom CSS codes. If not, then WordPress has a default functionality built in, in the recent updates. You can find that by going to Appearance > Customize > Additional CSS.

Adding Custom CSS to these fields will keep your codes safe even after you update the theme in future.

Child Theme is mainly used if you are willing to edit some core PHP files of the theme.

Thank you.

Hello Sam, we see that you have been very helpful with others having this issue. Can you please take a look at https://laborsaelite.com — none of the codes are working for us when attempting to show 2 columns for mobile.

Hello @ambassadorlbe,

All the WordPress themes have different coding that is the reason why custom codes for one theme will not working for others.
and that’s why other custom codes are not working for you too.

However you need to add this CSS in your Custom CSS or Additional CSS (Appearance > Customize > Additional CSS) for adjusting that:

@media screen and (max-width: 751px){
.woocommerce-active .multi-columns-row .col-sm-6 {
    width: 50%;
    float: left;
}
.woocommerce ul.products li.product {
    width: 50%;
    float: left;
}}

Hope that helps.

Thank you.

Hi @soumendra I tried to edit things myself and with the help of the codes posted on this thread but didn’t succeed ??

Could you please advice on the right css code for my theme to show two columns on mobile? Here it is: https://www.pictastar.com/shop/product-category/instagram/

Thank you in advance for your help.

-Sandy

• This reply was modified 7 years, 5 months ago by sandymorel. Reason: fixed mention

Hello @sandymorel,

You can try adding this in your Additional CSS(Appearance > Customize > Additional CSS) area for adjusting that:

@media screen and (max-width: 751px){
.woocommerce ul.products li {
    width: 50%;
}}

Hope that helps.

Thank you.

@soumendra it totally worked I tested it with different mobiles and tablets.

Thank you very much for your help and contribution to the community.

Have a blessed day.

-Sandy

Hello @sandymorel,

It’s pleasure helping you.

Feel free to ask if you need any help.

Thank you.

Hello @soumendra I also have this issue of 2 product mobile view.
Currently my website shows only one product on mobile.
Would appreciate if you can help me with a custom CSS
website is https://www.gentsarena.com

• This reply was modified 7 years, 3 months ago by ulodomatthew.

Hello @ulodomatthew,

Sorry for the late response.

You can try adding this CSS in your Additional CSS (Dashboard > Customize > Additional CSS) or style.css of your Child Theme for adjusting that:

@media screen and (max-width:750px){
.home .site-content .tyche-product-list .col-xs-6 {
   width: 100%;
}
.home .site-content .content-area-2 .col-md-4.col-sm-6.col-xs-12 {
   width: 50%;
}
.home .site-content .tyche-product-list .col-xs-6 .add_to_cart_button {
   font-size: 12px;
}}

Hope that helps.

Thank you.

Hi @soumendra I hate to jump on the bandwagon but this is what im looking for as well, should i Use one of the codes above or do i need my own specific CSS. tikotika.com

Hello @sprtan1117,

As I said above all the WordPress themes have different coding.
So, the other custom codes may not work for you.

.site-content {
    padding: 0;
}
.sp-shop-alignment-left ul.products li.product:nth-child(2n+1) {
    margin-right: 4%;
}
.sp-shop-alignment-left ul.products li.product {
    max-width: 48%;
    float: left;
    min-height: 420px;
}

Hope that helps.

Thank you.

Hello, i have tried several of the solutions but none of them work for me, can you please check my page: https://www.rd-service.se/ and help me?

Thank you! //Daniel

• This reply was modified 7 years, 1 month ago by redingeservice.

Hello @redingeservice,

You need to add this CSS to your Custom CSS for adjusting that:

@media screen and (max-width: 750px){
ul.products li.product {
    width: 50%;
    float: left;
    min-height: 300px;
}
ul.products li.product:nth-of-type(2n) {
    margin-left: 4%;
}}

Hope that helps.

Thank you.