[Resolved] size and spacing woocommerce products on mobile

[Eva]

Hi,
I am working on a woocommerce web shop using GP (as always 🙂
I would like to know if it’s possible to reduce the size of the shop items for the homepage and the shop page for mobile viewing.
The site is behind a coming soon, but I will give you access in the private info below.
Thanks in advance!
Eva

[David]

Hi there,

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

[Eva]

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

[David]

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

[Eva]

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!

[David]

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;
    }
}

[Eva]

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

[Leo]

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.

[Eva]

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!

[Leo]

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

Sorry the size of what?

[Eva]

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

[Leo]

The pictures are using WooCommerce blocks?

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

[Eva]

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

[Leo]

No problem 🙂

[Author]

Posts