[Resolved] size and spacing woocommerce products on mobile

Home Forums Support size and spacing woocommerce products on mobile

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1476444
    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

    #1476537
    David
    Staff
    Customer Support

    Hi there,

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

    #1477016
    Eva

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

    #1477942
    David
    Staff
    Customer Support

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

    #1478188
    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!

    #1478494
    David
    Staff
    Customer Support

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

    #1480622
    Leo
    Staff
    Customer Support

    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.

    #1480807
    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!

    #1481351
    Leo
    Staff
    Customer Support

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

    Sorry the size of what?

    #1481754
    Eva

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

    #1482232
    Leo
    Staff
    Customer Support

    The pictures are using WooCommerce blocks?

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

    #1484559
    Eva

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

    #1485354
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.