Product Image Size is Too Big When Zoomed In - Studio Theme

[NOLY]

Hello,

I have an issue with the product image size.

When I click a product image on the product page, the image size is opened with the full width of a computer or mobile screen.

Is it possible to set it up with a specific max-width for both computer and mobile screen?

My website address is www.noonelikeyouny.com

Thank you for your assistance in advance.

[PageFly-Victor]

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

Regard your concern to change product image size when zoom in. Please help me to add some custom code to your theme.liquid  file. Should follow these steps below

Step1: Online store > Themes > Edit code > Search : theme.liquid

Step2: paste this code to the above of </head>: 

{% if template contains 'product' %}

<style>

.product-media-modal__content.gradient {

max-width: 50%; 

margin: 0 auto;

}

</style>

{% endif  %}

Please change the % value to match with your requirement.

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

PageFly

[MCOFA]

This also works to past your style code in the "Custom Liquid" option of the product page theme editor. 

[MCOFA]

...and I am using the "Studio" theme, a Shopify gen 2 theme. 

[autotech44]

Works great for desktop but produces narrow sections of zoomed image on mobile. Anyone have a fix to add to this code?

Update: Using em instead of % on the max width fixes the mobile and responsive problems. 

[snoogs]

Can you show how to use em instead of %?  Thanks!

[autotech44]

I used this code in Custom Liquid under Product Information on the Default product page. 

{% if template contains 'product' %}
<style>
.product-media-modal__content.gradient {
max-width: 65em;
margin: 0 auto;
}
</style>
{% endif %}

[snoogs]

Woohoo!  Looks way better thank you!

[Lover]

Hello! This has made the desktop work but on mobile its looking like this. what do i do? 

[LitCommerce]

Hi @NOLY,

I have checked and you have disabled zoom, would you like me to guide it for you?