Make product image smaller on mobile product page

[KalleSpang]

Hi everyone!

I've set the size of my product images to "medium" on the product page and it all looks good on desktop.
But I think it's a little too big on mobile and would like to make it smaller on just mobiles. The "small" alternative would suit better on mobile, or if it is possible to set it to
a given percent.

Is there a way to do this?
I've tried to have a look at the code and changed around a bit, but I can't really find anything that works.

Best regards,

[KetanKumar]

Hello, @KalleSpang 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[KalleSpang]

Hi,

How kind of you!

www.porlabottles.se

Best regards,

[KetanKumar]

@KalleSpang 

do you have like this?

[KalleSpang]

Yes, that would be great!

Best regards, 

[KetanKumar · Accepted solution]

@KalleSpang 

Thanks for confirm 

1. Go to Online Store->Theme->Edit code
2. Asset->/Theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.product-single__media {
padding-top: 100% !important;

  img {
     height: 100%;
    object-fit: contain;
}

}
}

[KalleSpang]

Thank you so much! I really appreciate your help!
Like it alot more now!

For anyone who is interested in doing the same to their page, the "padding-top" paramater determines the size of the image, and it's possible to assign a higher value than 100% if you want it bigger and a lower value than 100% if you want it smaller.

I made mine a little bit bigger then the original 100%, just to fit my taste.

Best regards,

[KetanKumar]

@KalleSpang 

Thanks for update 

yes, you can

[TheVinylFly]

I sort of followed your instructions. My theme doesn't have a Theme.scss.liquid....it only has a theme.liquid or theme.css so I posted that code in theme.css the image doesn't get any smaller it just moves the carousel onto the image as if it was getting smaller but it doesn't 

[KetanKumar]

@TheVinylFly 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.