For the longest time..

  • Resolved lennilg

    (@lennilg)


    4 years, 4 months ago

    Dear Author,

    First off, we absolutely love your theme and will eventually purchase the pro version. For the longest time we’ve been wondering why the product image gallery cuts off the edge of the images. The further you scroll throughout the images the more of the next image goes missing.

    With products of 5 pictures or more, up to about 50px is cut off. Try browsing through the image gallery of the page, and you will notice it.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter lennilg

    (@lennilg)

    4 years, 4 months ago

    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..

    prodesignswpsupport

    (@prodesignswpsupport)

    4 years, 4 months ago

    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.

    Thread Starter lennilg

    (@lennilg)

    4 years, 4 months ago

    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, 4 months ago by lennilg.
    prodesignswpsupport

    (@prodesignswpsupport)

    4 years, 4 months ago

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘For the longest time..’ is closed to new replies.

Tags