Related products without formata

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 30.7% !important;
}

In my last comment I solved the problem. But now I see that in the mobile view it is messy. I am sorry.

Can you correct this?

Hi,

I’ve read your previous issue then checked your site and looks like you’ve reduce the width of the box of the related product. But seems like they are not displayed properly when in mobile screen.

So to fix this, please change this code:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    width: 30.7% !important;
}

with this:

@media only screen and (min-width: 991px){
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        width: 30.7% !important;
    }
}

Regards,
Awan

Thanks for your attention.
It perfectly solves the problem of the width of the products but it shows them in 2 rows.

I’ve changed woocomerce / includes / wc-template-functions.php so that it shows 3 items instead of 4.

Everything seems to work well. Thank you very much! A great work of support.