Archived

This topic is now archived and is closed to further replies.

  • 0

Padding - Woocommerce plugin

Question

Posted · Report post

Hi Folks

 

This is probably a woocommerce problem but maybe some one can point me in the correct direction. 

 

I have product listed here http://www.magva.com/product/art-nouveau/

 

as you can see there are five pictures, the main one and 4 smaller ones that appear in the lightbox. The last of the smaller ones is pushed right up against the bottom of the first. I'd like to add some padding but can't seem to track down what I need to change in the developer environment. 

 

Has anyone ever come across this before, or can point me in the right direction.

 

Thanks

 

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

EUREKA - This sort the issue out.

.woocommerce div.thumbnails a { margin-bottom: 3.8%; }

Share this post


Link to post
Share on other sites

Posted · Report post

You could try adding padding to the bottom of the images to get this effect http://d.pr/i/1A6z

Share this post


Link to post
Share on other sites

Posted · Report post

That's what I though I could do, but when I inspect the image and look at the CSS, the padding form the bottom is faded out and can't be selected (I'm using Safari). I must be looking in the wrong place! It seems you managed to select the correct element. 

Share this post


Link to post
Share on other sites

Posted · Report post

Just tried this in the custom CSS, no joy

.img.attachment-shop_thumbnail { padding-bottom: 10px; }

Share this post


Link to post
Share on other sites

Posted · Report post

try using this one instead. 

div.product div.images img

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Martin, that has partially sorted it. Have a look at the page again. There is a border appearing also that I need to remove. Tried this addition but no luck.

div.product div.images img { padding-bottom: 10px; border: none; }
Also tried 0px; for the border).

Ideally I'd prefer not to be adding the padding to the main image also

Share this post


Link to post
Share on other sites

Posted · Report post

The code you are looking for lies somewhere in here 

.woocommerce-page #content div.product div.images div.thumbnails  { padding-bottom:10px; }
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Still can't get rid of the border at the bottom. Have the spacing as I want it. 

.woocommerce div.thumbnails img { padding-bottom: 13px; border: 0px; }

Share this post


Link to post
Share on other sites

Posted · Report post

Good to hear. :)

Share this post


Link to post
Share on other sites