Product grid margin on media screen after update

Hi there ??

Could you please share a screenshot where the margin has been added and a link to your site?

I recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on the page, then paste the URL here. It works with Chrome, Firefox, Safari, and Edge.

Thank you!

Hi,

Sure! Hereby a link that shows the added margin on mobile devices: https://snipboard.io/rZVstq.jpg
The margin has been added to the following piece code:
media=”only screen and (max-width: 768px)”
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product

Unfortunately I can’t share the link as I am setting up my site on an internal server.

Hi @sabineblume,

Just to check, have you tried removing the margin via CSS, for instance:

yourselector{
  margin-bottom: 0 !important;
}

Thanks.

Hi,

I have tried the following css which didn’t work:
@media screen and (max-width: 768px) {
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
margin-bottom: 0!important;
}
}
I’m not too familiar with coding but I noticed the large gap between each row on mobile and found out that that piece of code is causing it.

I actually solved it by adding this piece of code:

@media screen and (max-width: 768px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: 0!important;
  }
}