Products in 2 columns in shop

[stekats]

Hello before the update I had 2 columns in mobile view but after the updates of cornerstone and x-theme the 2 column layout broke and it shows just 1 column
I have the following code but it doesn’t work now.
I would like 2 columns in mobile view please.

/* 2 columns shop in mobile */
@media (max-width: 979px){
.woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48% !important;
}
}

[tristup]

Hi Stella,

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 (max-width: 978.98px)
{
    [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

[stekats]

Your code worked perfectly @tristup thank you!!!

[prakash_s]

Hello Stella,

Glad that @tristup were able to help. Please free to reach us if have any more concern regarding our theme and theme settings.

Thanks