[Resolved] Related Product Images – Adjust Spacing

Home Forums Support [Resolved] Related Product Images – Adjust Spacing

Home Forums Support Related Product Images – Adjust Spacing

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #699787
    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
    #699861
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know πŸ™‚

    #700222
    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?

    #700452
    Tom
    Lead Developer
    Lead Developer

    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?

    #700589
    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?

    #700759
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product,
    .woocommerce ul.products li.product a img {
        margin-bottom: 0;
    }
    #700814
    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

    #700997
    Tom
    Lead Developer
    Lead Developer

    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%;
    }
    #701015
    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

    #701456
    Tom
    Lead Developer
    Lead Developer

    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%;
    }
    #701808
    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%;
    }

    #702365
    Tom
    Lead Developer
    Lead Developer

    Awesome πŸ™‚

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

    #702406
    bluebit

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

    #702704
    Tom
    Lead Developer
    Lead Developer

    It won’t be for a month or so πŸ™‚

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