[Resolved] Related Product Images – Adjust Spacing

[bluebit]

I currently have on the bottom of product pages Related Products at 3 columns and rows and I’d like to make the spaces between the 3 images smaller, this will also make the images slightly bigger, how do I does this?

GP Premium 1.7.2

[Tom]

Hi there,

Any chance you can link us to your site? Should be do-able with some CSS.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

https://stockisla.com/product/lion/

the white gaps of space in between the related images i think its also called gutter, how to make reduce white gap size and pics slightly bigger/wider

And is there a way to make the related images have an extra column below the first one?

[Tom]

Give this a shot:

.woocommerce .wc-related-upsell-columns-3 .related ul.products li.product {
    width: 31%;
}

.woocommerce .related ul.products li.product {
    margin-left: 2%;
}

.inside-wc-product-image {
    width: 100%;
}

Not too sure what you mean by an extra column?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

I tried it but had to adjust it to make it work, this is the code im using

.woocommerce .wc-related-upsell-columns-3 .related ul.products li.product {
width: 28.6%;
}

.inside-wc-product-image {
width: 110%;
}

But now there is a wide gap between the first and second column, see: https://stockisla.com/product-tag/lion/

How to decrease column size to same size as the row gaps?

[Tom]

Try this:

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product a img {
    margin-bottom: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

That worked, but I noticed a problem on the right side for mobile is missing padding or margin, the 3 image to the right is hugging the border.

See:

View post on imgur.com

[Tom]

That’s happening because of this CSS you used:

.inside-wc-product-image {
    width: 110%;
}

Instead of the CSS you shared above, I would do this:

.inside-wc-product-image {
    width: 100%;
}

.woocommerce .wc-columns-3 ul.products li.product, .woocommerce-page .wc-columns-3 ul.products li.product {
    width: 32%;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-left: 1%;
}

.woocommerce ul.products {
    margin-left: -1%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

Man this sucks, so I deleted the code that i used and tried yours, but then the related product images on the product page have the big white space gaps again, so I tried experimenting with the numbers to no avail. I guess I’ll have to try something else to get it to line up correctly with reduced space gaps.

I reverted back to my deleted code as that at least looks good on desktop

[Tom]

You’d need both blocks of code I provided in order to adjust the spacing for both instances.

.inside-wc-product-image {
    width: 100%;
}

.woocommerce .wc-related-upsell-columns-3 .related ul.products li.product,
.woocommerce .wc-columns-3 ul.products li.product, 
.woocommerce-page .wc-columns-3 ul.products li.product {
    width: 32%;
}

.woocommerce .related ul.products li.product,
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-left: 1%;
}

.woocommerce ul.products {
    margin-left: -1%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

after tinkering around i finally got it to work and look how i want it thanks for the code 🙂

this is what i changed to make it work:

.inside-wc-product-image {
width: 110%;
}

.woocommerce .wc-related-upsell-columns-3 .related ul.products li.product,
.woocommerce .wc-columns-3 ul.products li.product,
.woocommerce-page .wc-columns-3 ul.products li.product {
width: 28.65%;
}

.woocommerce .related ul.products li.product,
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin-left: 3.7%;
}

.woocommerce ul.products {
margin-left: -4%;
}

[Tom]

Awesome 🙂

We’ll be making this much easier in GPP 1.8.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

ok, when is GPP 1.8 coming out? so i can not use the css code hehe

[Tom]

It won’t be for a month or so 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts