Why are my Dawn theme mobile images appearing too large?

Solved

Why are my Dawn theme mobile images appearing too large?

Mark3347
Excursionist
43 3 10

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

Accepted Solution (1)
Mark3347
Excursionist
43 3 10

This is an 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!

View solution in original post

Replies 4 (4)

PageFly-Victor
Shopify Partner
7865 1785 3078

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

PageFlyVictor_0-1681351269746.png

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

Mark3347
Excursionist
43 3 10

This is an 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
Shopify Partner
7865 1785 3078

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

CStudios
Excursionist
11 0 4

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!