Space for clicking on the product image bigger than the image

[joshua]

Hey Dave 😉

My last Problem…

The space for clicking on the productimage (to get on the single-productpage) is bigger than the image it self… Is that fixable? Because the gab between the products is very big, just because of it.

Would be awesome!
Thanks

[Sonnal S Sinha]

Again your website is in construction mode.

[joshua]

I`m sorry!

now its open again…

[Sonnal S Sinha]

Hi,

Add this code in Custom CSS Box:

.woocommerce div.product div.images img { width:100% !important;}

Regards,
Dave

[joshua]

thanks for the answer, but i need to have the images smaller than 100%… actually like 50%. And the rest of the 50% seems like to be the empty space between the products which i wanna get rid off 🙂

[Sonnal S Sinha]

Kindly go to Appearance»Theme Options»Basic Settings»Custom CSS Box:

Add this code there:

.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:24% !important;}
.woocommerce div.product div.images img { width:100% !important;}
.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:68% !important;}

Regards,
Dave

[joshua]

Thank you for the answer, but i doesn’t change anything :S

[Sonnal S Sinha]

Hi Joshua,

Can you send us screenshot? Upload your screenshot on imgur.com and paste the share URL here.

Regards,
Dave

[joshua]

Hey,

here we go:http://imgur.com/a/8kli3

Regards

[Sonnal S Sinha]

What exactly you want? Can you draw instructions on the screenshot so that we can resolve the issue asap.

Regards,
Dave

[joshua]

http://imgur.com/a/o87ER

I want the images smaller, but close to each other.
The codes you gave me just made them smaller but the gab got bigger..

Thanks!

[Sonnal S Sinha]

Hi,

Remove this code from Custom CSS Box:

.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:24% !important;}
.woocommerce div.product div.images img { width:100% !important;}
.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:68% !important;}

We will provide you another CSS after removing this code.

Regards,
Dave

[joshua]

I did 🙂

[Sonnal S Sinha]

Add this code in Custom CSS Box:

.site-main { margin-left:0;}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:15% !important; margin-right:25px !important;}

Regards,
Dave

[joshua]

Thank You, know it Looks Perfect, but there are only 4 Products in a row and i cant Change it in more :s

Kind Regards,

Josh

[Author]

Posts