[Resolved] Extra padding on product page

Home Forums Support Extra padding on product page

  • This topic has 9 replies, 3 voices, and was last updated 3 months ago by Tom.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1338597
    Ash

    I’m getting extra padding on the bottom of single product page.

    Think it’s coming from related products / recently viewed grids, grid gap is 30px and container at 20px

    Can you take a look

    #1338732
    David
    Staff
    Customer Support

    Hi there,

    there is quite a few margins / paddings at play on the single product.
    Its probably the 30px bottom padding added to single posts ie. this theme CSS:

    .one-container:not(.page) .inside-article {
        padding: 0 0 30px 0;
    }

    You can remove that on Woo single product with this CSS:

    .single-product #page .inside-article {
        padding: 0;
    }
    #1338760
    Ash

    Thanks second one removed a little bit.

    I would of thought related products/ recently view would of inherited similar settings as category page grid, as the vertical padding looks like it does but horizontal it doesn’t, it’s quite big on mobile/tablet.

    #1339504
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That looks like margin from WooCommerce itself on mobile.

    Try this:

    @media (max-width: 768px) {
        .woocommerce ul.products[class*=columns-] li.product, 
        .woocommerce-page ul.products[class*=columns-] li.product {
            margin-bottom: 0;
        }
    }
    #1339813
    Ash

    Thanks Tom, that worked.

    But it removed bottom padding from recently viewed grid on mobile. Strange that recently viewed uses a different size image that’s why the grids don’t match.

    #1340520
    Tom
    Lead Developer
    Lead Developer

    Where can I find the recently viewed grid?

    #1340537
    Ash

    View are few products and it will begin to show under related products

    #1340747
    Tom
    Lead Developer
    Lead Developer

    Ah, GPP isn’t familiar with that section, so our grid system isn’t applying to it.

    Try this:

    .wc-related-upsell-mobile-columns-2 ul.products {
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-gap: 10px;
    }
    
    .wc-related-upsell-mobile-columns-2 ul.products:before {
        display: none;
    }
    
    .woocommerce .wc-related-upsell-mobile-columns-2 ul.products[class*=columns-] li {
        width: auto;
        margin: 0;
        padding: 0;
    }
    #1341052
    Ash

    No sorry that made it all look weird. Yeah It’s just a function adding woocommerce recently viewed to product page it all runs off the standard widget. It’s responsive columns are different to gp aswell, be good if gp added extra column on landscape instead of just making product boxes bigger. I think I will just leave it for now how it is.

    #1341747
    Tom
    Lead Developer
    Lead Developer

    Sounds good – let us know if you want to re-visit it.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.