Woocommerce Product Columns on mobile devices

[CandorCare]

Hi
I’m looking for a little advice please. My product columns on smaller screen sizes are touching, they are find on large sizes. I’ve attempted to look for the css in the element inspector by have not found the correct element that controls this.

I’ve attached 2 images when reducing the screen size firstly the centre columns touch then when reduced further all columns touch.

Would you be able to advise on the correct css please to rectify this so there is spacing between the columns?

[CandorCare]

The web address is https://www.yumyumsweets.shop

[tristup]

Hi Lee,

Thanks for reaching out.
It seems that the product column size has been mentioned for the specific screen size using custom CSS code, I would suggest you add the following code to override that for the specific screen size.

@media (max-width: 979px) and (min-width: 690px)
{
    .woocommerce.columns-4 li.product 
    {
        width: 47.8% !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.

[CandorCare]

Hi
Thanks for your reply but this has not resolved the issue, the custom code used was one supplied by your support team on a previous ticket. The code was:

@media (max-width: 979px) and (min-width: 690px){
.woocommerce li.product.first,
.woocommerce .cols-3 li.product:nth-child(2n+1){
clear: both!important;
}

.woocommerce .cols-3 li.product{
width: 22% !important;
margin-right: 4%;
}

.woocommerce .cols-3 li.product.last,
.woocommerce .cols-3 li.product:nth-child(1n+2){
margin-right: 4% !important;
}

.woocommerce .cols-3 li.product:nth-child(2n+3),
.woocommerce .cols-3 li.product.last {
clear: none;
}

.woocommerce .cols-3 li.product:nth-child(4n+4){
margin-right: 0 !important;
}
}

This was to show 4 columns on iPads for example and 2 on smaller screens such as iPhones. For some reason the spacing between the products has altered so the gaps between them disappear when shrinking the screen size.

If you can’t help with the code is there an out of the box solution with your product you can suggest?

[prakash_s]

Hello Lee,

I checked your site it seems that your custom CSS is rendering from the Autoptimize minified styles. I would suggest you clear your minified style and take a backup of your custom style and then remove the product style then check it again. I would also suggest you to temporarily deactivate the Autoptimize plugin and then clear your browser cache. If it doesn’t work please let us know.

Thanks

[CandorCare]

Hi
I’ve turned off autoptimise, removed the custom css and cleared cache and that has sorted the 4 column view problem, ie. the centre product are not touching. However when viewing on smaller screens the 2 column view the product are still touching. It looks like the margin is being ignored. See image

I’d like if possible for a gap to be maintained like this.

[ruenel]

Hello Lee,

The given credential is incorrect.

Best Regards.

[CandorCare]

Hi
Please can you try the new creds

[prakash_s]

Hello Lee,

It seems that you have clear the Autoptimize minified styles but it seems that you are using Swift cache plugin. I would suggest you purge all the cache then check it again. if the issue still persists you can use this custom CSS code under Pro—>Theme Option —>CSS

@media(max-width:767px)
{
[class*=woocommerce] ul.products.columns-4 li.product {
margin-right: 15px;
}
}

@media(max-width:479.99px)
{
[class*=woocommerce] ul.products.columns-4 li.product {
margin-right: 0px;
width:100% !important;
}
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[CandorCare]

Thank you so much for this!

[matt]

You’re welcome, Lee!