Adjusting product picture sizes on mobile

[filiplarson1]

Hey!

I'm about to launch my e-commerce site but I've got a problem. I think the product pages are easy to navigate and quite 'clean' on desktop, but the pictures are very tall on mobile.. too tall.

Link: https://hellstrom-co.myshopify.com

Password: 1234

I've gone through the Shopify Community and independent websites to see how others have tackled this problem, but none of the solutions seem to work for me!

[Lazarus7181]

Hey there @filiplarson1 ,

Kindly make some screenshot of "pictures are very tall on mobile" and how exactly short you want them to be?

[filiplarson1]

The first picture is from the website, it's fine like that. But its annoying having to scroll so far to get to the description and CTA button on mobile. It should preferably be small enough so that the name or at least the top of the name is visible when looking at the picture. So if you go on the product page, you see both the picture and a portion of the product's name.

[Lazarus7181]

@filiplarson1 ,

Something like these?

[Lazarus7181]

[filiplarson1]

That's a lot better! Could the selected picture (in this case the tube) be placed in the center of the screen and the smaller pictures be made a bit smaller?

Thank you!

[Lazarus7181]

@filiplarson1 ,

What I have showcase was a preview and your shopify store has not been changed anything yet.

I believe you like to achieve the left side kind of preview once someone is viewing from mobile.

Unfortunately, you will face an issue if the person trying to zoom in by holding onto the photo, it will looks like the right.

So, there is a need to do some changes to your javascript and another css directly which is in your admin site.

[filiplarson1]

I'm very happy with that! How can I implement it?

[Lazarus7181]

@filiplarson1 ,

Kindly pm me your shopify store url, email and password for login into your shopify admin.

Only if you are comfortable to do so.

[filiplarson1]

Can you please send me the code and tell me where to insert it instead?