Re: Make product image smaller on mobile product page

Solved

Make product image smaller on mobile product page

KalleSpang
Tourist
7 0 7

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,

 

Accepted Solution (1)
KetanKumar
Shopify Partner
36932 3642 11998

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 56 (56)
KCosm
Tourist
10 0 2

Is this still a working solution? I´d like to have smaller product images but ONLY for the mobile version. Is there a build in solution available meanwhile? 

KetanKumar
Shopify Partner
36932 3642 11998

@KCosm 

can you please share url

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Daniel198
New Member
4 0 0

Hi there I entered this code but now my carosel and image have a large gap between them how do i make them both come together whilst keeping the image size the way it is now with the code you provided? 

Daniel198
New Member
4 0 0

see what i mean by the gap with photo attached

 

Screenshot 2023-10-19 at 7.10.35 am.png

Daniel198
New Member
4 0 0
hannahfh
Visitor
1 0 0

Hello @KetanKumar  !

I need help resizing my images on product page for mobile. they are too wide on mobile but i dont know where in the code to change this. Site url is https://phenotype.shop/products/akimbo for example. In mobile view width is fixed but not sure how to fix this for all products

KetanKumar
Shopify Partner
36932 3642 11998

@hannahfh 

Oh sorry for that issue 

can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/style.css ->paste below code at the bottom of the file.

.product-img img {
    height: 100%;
}

 Result 

KetanKumar_0-1705556217052.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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing