[Resolved] Extra padding on product page

[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

[David]

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

[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.

[Tom]

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

[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.

[Tom]

Where can I find the recently viewed grid?

[Ash]

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

[Tom]

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

[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.

[Tom]

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

[Author]

Posts