Make product image smaller on mobile product page

Solved
Tourist
7 0 6

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,

 

Shopify Partner
11954 1474 4326

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
7 0 6

Hi,

How kind of you!

www.porlabottles.se

 

Best regards,

 

Shopify Partner
11954 1474 4326

@KalleSpang 

do you have like this?

KetanKumar_0-1603161838547.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
7 0 6

Yes, that would be great!

Best regards, 

Shopify Partner
11954 1474 4326

This is an 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;
}

}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
7 0 6

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,

Shopify Partner
11954 1474 4326

@KalleSpang 

Thanks for update 

yes, you can

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
6 0 1

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 

Shopify Partner
11954 1474 4326

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes