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.

[TheVinylFly]

Thanks Ketan, here is the link:

 https://thevinylfly.com/products/siser-htv-easy-weed-12-x-15?variant=37855830933694.

I'm going to eventually to enable my swatch widget and showcase the colors in the swatches....you wouldn't happen to know how to hide the image carousel on mobile would you?

[KetanKumar]

@TheVinylFly 

yes, sure let me know which one do you have hide?

[TheVinylFly]

I would like to hide all of the carousels on my "VINYL" (HTV & Adhesive) products because there's just so many colors to choose from and they would look better laid out in swatches rather than a carousel. 

[KetanKumar]

@TheVinylFly 

Thanks for it 
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for 5-6 second 

.product-single__thumbnails { display: none;}

[TheVinylFly]

I posted that code at the bottom of my theme.css file but it didn't seem to do anything

[KetanKumar]

@TheVinylFly 

this code apply to hide thumbnails 

[TheVinylFly]

Is it supposed to hide the thumbnails on the mobile carousel or somewhere on desktop? I didn't seem to see any change to my website after posting that code

[KetanKumar]

@TheVinylFly 

yes, is possible to custom code can you please add me on staff so i will quick-fix mobile and desktop show hide 

[TheVinylFly]

That would be great! how do I go about adding you to staff to edit that for me?

[KetanKumar]

@TheVinylFly 

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

[TheVinylFly]

Great, Just need your Email Ketan, sent you a PM

[KetanKumar]

@TheVinylFly 

Great Thanks i will check and sent details 

[juiceindia]

Please help me @KetanKumar i use theme warehouse.

www.thecocoexpress.in

i want to make product image smaller on mobile product page.

Thanks

[KetanKumar]

@juiceindia 

sorry for any issue  have check real device it proper look if you have issue please share screenshort 

[juiceindia]

@KetanKumar Sir my point is, the website viewer on mobile should see the price without scrolling. the viewer have to scroll a bit to see the price.

[KetanKumar]

@juiceindia 

can you please share issue images?

[juiceindia]

 @KetanKumar 

On mobile, the viewer has to scroll to see the price. 

[juiceindia]

I need something like this 

@KetanKumar 

[KetanKumar]

@juiceindia 

yes, please confirm 

[juiceindia]

@KetanKumar Yes this should do.

[KetanKumar]

@juiceindia 

yes, please try this code

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

@media screen and (max-width: 640px) {
.product-gallery__size-limiter .aspect-ratio {
    padding-bottom: 45% !important;
}

.product-gallery__size-limiter img.product-gallery__image {
    object-fit: contain;
}
}

[juiceindia]

Thanks, it has solved the purpose. When we click the image to zoom, a new issue arises.

I am attaching the screenshots. 

@KetanKumar 

this is not okThis is ok

[KetanKumar]

@juiceindia 

oh sorry for that let's have check and update

[KetanKumar]

@juiceindia 

can you please remove first code after adding this updated code

@media screen and (max-width: 640px) {
.product-gallery__size-limiter .aspect-ratio {
    padding-bottom: 45% !important;
}

.product-gallery__size-limiter img.product-gallery__image, .pswp--zoom-allowed .pswp__img {
    object-fit: contain;
}
}

[juiceindia]

@KetanKumar 

Sir this is not working. Same problem