Make product image smaller on mobile product page

Store Design
1

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,

1 Like
2

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.

1 Like
3

Hi,

How kind of you! :slightly_smiling_face: :slightly_smiling_face:

www.porlabottles.se

Best regards,

1 Like
4

@KalleSpang

do you have like this?

KetanKumar_0-1603161838547.png
KetanKumar_0-1603161838547.png1920×1080 361 KB

1 Like
5

Yes, that would be great!

Best regards,

1 Like
6

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

}
}
1 Like
7

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

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,

2 Likes
8

@KalleSpang

Thanks for update

yes, you can

1 Like
9

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

1 Like
10

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

1 Like
11

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?

12

@TheVinylFly

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

1 Like
13

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.

14

@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;}
1 Like
15

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

16

@TheVinylFly

this code apply to hide thumbnails

1 Like
17

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

18

@TheVinylFly

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

1 Like
19

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

1 Like
20

@TheVinylFly

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

1 Like