size and spacing woocommerce products on mobile

Hi there,

do you want to reduce the size of the products and put more space between them?

Yes, that would be great!
Thank you, David.

You can increase the Column Gap in Cutsomizer > Layout > Woocommercee

Yes, I know and I tried it already, but I don't see much difference. Moreover it only works on the shop page, but not on the other pages that show items from the shop like HOME and INTERIEUR & STYLING. And I find the product photo's quite big...
Is there a way to correct this?
Thank you!

Try this CSS - it will add some padding to the Products on smaller screens:

@media(max-width: 1024px) {
    .woocommerce ul.products li.product,
    .wc-block-grid__product {
        padding: 20px;
        box-sizing: border-box;
    }
}

Hi David,
I only see a change on the tablet size, but then there is a problem too, see https://prnt.sc/uvre9k for a screenshot. I don't see any difference on a cellphone, the photo's are still quite big and the gap remains big too....

I am sorry about this, I don't know if anything else can be done.
Thank you,
Eva

The title overlap issue is due to this CSS you've added:

.wc-block-grid__product-title {
    font-family: inherit;
    line-height: 0.5em;
    font-weight: 400;
    font-size: 16px;
}

Try changing the line-height to 1em at the smallest.

Thanks Leo, problem solved. Do you think there is a way to diminish the size on HOME and INTERIEUR & STYLING? If not, then we have to live with it :-)
Thanks!

Do you think there is a way to diminish the size on HOME and INTERIEUR & STYLING?

Sorry the size of what?

O sorry ... the size of the products (product pictures).

The pictures are using WooCommerce blocks?

If so you will need to check with their support team.

Yes, they are... I will check with the Woo support team, and mark this topic as resolved.
Thank you,
Eva

No problem :)