Can I adjust the zoom on product photos in Whisk template?

[StephenM88]

On my website (Whisk template), the product photos look great but photo 4 for each product is the nutrition facts.  This photo is zoomed in to where not all of the information can be read.  Can this be edited in code?

Example: https://udderlynuts.com/products/caramel-cookie-crunch-peanut-butter

Thank you!

[StephenM88]

[Abdosamer]

@StephenM88 , go to styles-base.css and add the following code :

li#Slide-template--16372461633697__main-6735219785889-31188517781665 .media-gallery__preview-image img {

  object-fit:contain !important;

}

[StephenM88]

Hey! I tried that but it doesn't seem to have had any effect.

[Abdosamer]

@StephenM88 , Add this code instead:

li#Slide-template--16372461633697__main-6734475460769-31188421279905 img {
    object-fit: contain !important;
}

[StephenM88]

That worked beautifully for that product but the rest of my catalogue still has the issue - Is there a way to do it for all products?

[Abdosamer · Accepted solution]

@StephenM88 , Add the following code :

ul.media-gallery__list .media-gallery__item:nth-child(4) img {
    object-fit: contain !important;
}