Archived topic

Product Photo Margin

5 replies · Started by Anonymous on September 23, 2015

Viewing posts 1–6 of 6

September 23, 2015 at 2:52 pm #139179

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

September 23, 2015 at 3:12 pm #139183

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 :)

September 23, 2015 at 3:32 pm #139189

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

Stephen

September 23, 2015 at 10:28 pm #139249

You're welcome :)

April 4, 2018 at 12:47 pm #541293

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

April 4, 2018 at 3:09 pm #541380

Awesome! :) Glad you could get it working!

This archived topic is closed to new replies.

Start building better websites today.