Two columns on woocommerce product page not working anymore

[Minna]

I have this code on my theme options css, and also in Appearence - Themes - Customise - Additional CSS. However it isn’t working anymore, and now it shows only one column in mobile view when it used two show two columns. It previously worked fine so just wondering what is the issue. Site in question https://www.gopala.com/

@media screen and (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48% !important;
}
}

[tristup]

Hi Minna,

Thanks for reaching out.
We have simplified WooCommerce integration and stopped overriding a few classes and templates. Based on the classes used, it has been found that the given CSS code needs to be modified. I would recommend you to add the following CSS code into the Theme Options > CSS to avoid this issue.

@media screen and (max-width: 480px) 
{
    [class*=woocommerce] ul.products.columns-2 li.product, 
    [class*=woocommerce] ul.products.columns-3 li.product, 
    [class*=woocommerce] ul.products.columns-4 li.product 
    {
        width: 48% !important;
    }
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks