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

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

NOLY
Tourist
13 0 3

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.

 

Replies 9 (9)

PageFly-Victor
Shopify Partner
7865 1785 3079

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
Excursionist
29 0 11

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

MCOFA
Excursionist
29 0 11

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

autotech44
Excursionist
19 1 2

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
Visitor
2 0 1

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

autotech44
Excursionist
19 1 2

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
Visitor
2 0 1

Woohoo!  Looks way better thank you!

Lover
New Member
9 0 0

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

IMG_0286.PNG

LitCommerce
Astronaut
2860 684 745

Hi @NOLY,

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!