For the longest time..

I’ve noticed that the issue is related to the translate3d of the image gallery, it’s suppose to calculate the with of each image, and when clicking around in the gallery it puts the number together in a negative fashion.

First image begins with transform: translate3d(0px, 0px, 0px);
The with of the next image is 562px
Next image get’s transform: translate3d(-562px, 0px, 0px);
With of the 3rd image is 572px

Now, I’m no math genius but if I put 562+572 together I get 1134
However, the gallery generates transform: translate3d(-1124px, 0px, 0px);

That’s a difference of 10px for every time I go further towards the last image, eventually with 6 images, the viewport is off by 50px..

Hello There!

Hope you are doing well!

Follow the below steps to add custom CSS to perform the above mentioned update

1) Please log in to the admin area
2) Go to “Appearance >> Customize >> Additional CSS”
3) Paste the below code in “Additional CSS”

.woocommerce div.product.product_tag-casual div.images .woocommerce-product-gallery__image:nth-child(n+2){padding:0;}

4) save the Updates

Hope this helps!

Thanks.

Excellent! What a simple yet wonderful solution. Yet, it didn’t work out of the box as suggested, had to apply your solution differently using:

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){padding:0;}

But, that being said. Now it works as expected, and looks much more professional.

Thanks a lot @prodesignswpsupport

• This reply was modified 4 years, 11 months ago by lennilg.

Hello There!

Greetings of the day!

We are glad that it worked.

Feel free to get in touch in case of any other query.

Thanks.