[Resolved] Product Photo Margin

[Stephen]

Tom,

I cannot figure out why I have about 260px of margin on the right side of my product photo. I only what there to be 40px of margin between the product photo and the text. Here is a link to the page I am having problems with. barbersbrand.com

Any help is much appreciated,
Stephen

[Tom]

Hi there,

This is happening because WooCommerce has it set up so the images area takes up 48% of the screen.

Then you have this CSS making it so the image is a maximum of 400px:

.single-product .images img {
    max-width: 400px;
}

So the image is 400px wide, but the area (48%) is much larger.

You can adjust the width of the area with this CSS:

.woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images {
    width: 48%;
}

.woocommerce #content div.product div.summary, 
.woocommerce div.product div.summary, 
.woocommerce-page #content div.product div.summary, 
.woocommerce-page div.product div.summary {
    width: 48%;
}

The first block is your image, and the second block is your content.

So if you reduce your left side by 10% for example, you’ll want to increase the right side by that same percentage.

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Let me know if you need more info 🙂

[Stephen]

Thank you very much Tom, that worked perfectly.
barbersbrand.com

Stephen

[Tom]

You’re welcome 🙂

[Catalina]

Thanks a lot for this thread, I ventured to work with CSS for this situation and it looks perfect now!

[Tom]

Awesome! 🙂 Glad you could get it working!

[Author]

Posts