Jump to content
Sign in to follow this  
Keith Vaugh

Padding - Woocommerce plugin

Recommended Posts

Keith Vaugh+    14
Keith Vaugh

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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
Keith Vaugh+    14
Keith Vaugh

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
greenfly    230
greenfly

try using this one instead. 

div.product div.images img

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
greenfly    230
greenfly

The code you are looking for lies somewhere in here 

.woocommerce-page #content div.product div.images div.thumbnails  { padding-bottom:10px; }
  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
Keith Vaugh+    14
Keith Vaugh

EUREKA - This sort the issue out.

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

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Good to hear. :)


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×