Why are my Dawn theme mobile images appearing too large?

[Mark3347]

Hello,

I recently updated to the new Dawn 8.0 and made some changes to my product images.  After previewing (EYE next to a product) some products in the mobile view, I found that some of the images are too big, and other images don't shrink down to fit the space and are completely cut off.

Here is my URL  -  https://arcticsealwinecoolers.com/

Follow this link and view in mobile view

https://arcticsealwinecoolers.com/collections/2-in-1-wine-and-beverage-coolers

Here you will see an EYE to preview the images.  When you click the EYE, scroll through the images.  (The images are not great quality, so please don't comment on that.)  As you scroll through you see some images are too big for the space.  These are provided by the manufacturer and I can't really do anything about. But further on you will see some informational images that are cut off. 

Is there a way to have the informational images fit properly in the space, and then the user could "pinch" to expand the image for a closer view?

TIA!

Mark

[PageFly-Victor]

Hi @Mark3347,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file usf.css

Step 3: Paste the below code at bottom of the file -> Save

@media(max-width:767px){
.usf-preview__image {
    background-size: contain !important;
}
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[Mark3347 · Accepted solution]

Hi,

Thanks.  I tried that in usf.css and it didn't work, but I applied it in the theme editor and it worked great!  Thank again!

[PageFly-Victor]

Hi @Mark3347,
You are welcome. I'm glad when I can help you 😍

[CStudios]

Hi Victor

I'm having a similar issue. Desktop is fine, but on mobile, clicking an image to view it in a larger makes the image way too big. 
Website product page: https://www.cadeaustudios.com/products/cin-cin-glasses

Would the solution above work as a solution to my issue as well? 

Thank you!