Re: Product photos too zoomed in

Solved

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

StephenM88
Excursionist
14 0 6

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!

Accepted Solution (1)
Abdosamer
Shopify Partner
919 171 191

This is an accepted solution.

@StephenM88 , Add the following code :

ul.media-gallery__list .media-gallery__item:nth-child(4) img {
    object-fit: contain !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

View solution in original post

Replies 6 (6)

StephenM88
Excursionist
14 0 6

StephenM88_0-1704841037148.png

 

Abdosamer
Shopify Partner
919 171 191

@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;

}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
StephenM88
Excursionist
14 0 6

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

Abdosamer
Shopify Partner
919 171 191

@StephenM88 , Add this code instead:

li#Slide-template--16372461633697__main-6734475460769-31188421279905 img {
    object-fit: contain !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
StephenM88
Excursionist
14 0 6

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
Shopify Partner
919 171 191

This is an accepted solution.

@StephenM88 , Add the following code :

ul.media-gallery__list .media-gallery__item:nth-child(4) img {
    object-fit: contain !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work