Two rows of products on mobile

[odsadmin]

Hello,
I just updated my staging site to the newest X theme and for some reason on mobile, it is no longer putting products in rows of two. You have given me customer code before but it does not look like it’s working anymore.

You might have to type it in twice. For some reason, the box pops up 2

This is what I was given last time
/* 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]

Hey @odsadmin,

Thanks for writing in!

I found out that you are using CloudFlare. Right after your updates, please log in to your CloudFlare account and purge your site cache. You also need to regenerate the minified CSS and JS files in CloudFlare.

• https://support.cloudflare.com/hc/en-us/articles/200169246-Purging-cached-resources-from-Cloudflare
• https://support.cloudflare.com/hc/en-us/articles/200169396-Why-aren-t-changes-to-my-site-showing-
• https://support.cloudflare.com/hc/en-us/articles/200168196-How-do-I-minify-HTML-CSS-and-JavaScript-to-optimize-my-site-

Please let us know how it goes.

[odsadmin]

We have purge cloud flare and the problem is still happening. Also on my computer, I bypass cloud flare and the problem is still showing. I think something changed in the theme’s code to make the code I added not work.

[odsadmin]

I got this fix. Thank you. This is what I added.

@media only screen and (max-width:767px) {
.dogsupply-item {
margin-bottom:30px;
width: 50%;
}
.dogsupply-item:nth-child(2n) + .dogsupply-item {
clear: both;
}
.woocommerce li.product {
width: 100%;
}
.x-content-band .woocommerce li.product {
width: 48%;
float: left;
margin: 0 0% 30px 0%;
}
.home .x-content-band .woocommerce li.product {
width: 48%;
float: left;
margin:0 1% 30px 1%
}

.x-content-band .woocommerce li.product:nth-child(2n + 1){
    clear: both !important;
}
.x-content-band .woocommerce li.product .entry-product .entry-header{
    font-size: .8rem;
}

}

[friech]

You’re must welcome,

Cheers!