Make two product show on mobile

[odsadmin]

I need to make the product on my home page show in twos on cell phones. If you view all my other product pages they show in rows of two but some reason on my home page in these two sections Popular Dog Products and Sales are showing 1 row of products. I would like two to show just like the boxes at the top of the home page. I found this code but it is no longer working. Could you please help me.

/* Make 5 column product items in desktops, ipad */
@media(min-width: 768px){
.x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}

.x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}

/* Make 2 column product items in the Phone and smaller screens */
@media(min-width: 768px){
.x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}

.x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}

@media(max-width: 767px){
.x-content-band .woocommerce.columns-5 li.product {
width: 49%;
margin-right: 2%;
}

.x-content-band .woocommerce.columns-5 li.product:nth-child(2n) {
margin-right: 0;
}

.x-content-band .woocommerce li.product.first {
clear: none;
}
}

[ruenel]

Hello @odsadmin,

Thanks for writing in!

Please be advised that the code above will only work if you have 5 column product items. If you have a different number of columns, you will need to modify the code above and change the .columns-5 into .columns-{n} with the exact number of columns you currently have in your site.

We would love to know if this has worked for you. Thank you.