Product Image Zooming in a lot when clicking on it.

Solved

Product Image Zooming in a lot when clicking on it.

Lover
New Member
9 0 0

Hello! Im facing two isses. The first is that when I press on a product image, the image zooms in like crazy. I edited it using this code below - which helped on desktop but has not helped on mobile (ill attach the image below). 

Code used: 

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



Mobile Product Image when clicked: 

IMG_0286 (1).PNG


Note that this is the studio theme. 

Accepted Solution (1)
Raj-webdesigner
Shopify Partner
322 75 78

This is an accepted solution.

Add this css in your edit code > base.css file

.product-media-modal[open]{
    z-index: 999 !important;
}

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 7 (7)

Raj-webdesigner
Shopify Partner
322 75 78

Can You share your Site Url?

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


Lover
New Member
9 0 0

Here you can see the issue here: https://loverlosangeles.com/products/black-zip-up 

Raj-webdesigner
Shopify Partner
322 75 78

Add this code in your edit code > base.css file

@media screen and (max-width:767px){
	.product-media-modal__content.gradient {
	    max-width: 90% !important;
	}	
	.product-media-modal__content.gradient img {
    	width: 100% !important;
	}	
}

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


Lover
New Member
9 0 0

That worked!!! any idea how to make it open in a way that doesnt clash with "categories" as seen below on mobile?

IMG_CBDA54B41E72-1.jpeg

Raj-webdesigner
Shopify Partner
322 75 78

This is an accepted solution.

Add this css in your edit code > base.css file

.product-media-modal[open]{
    z-index: 999 !important;
}

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


Lover
New Member
9 0 0

Thank you! that worked out!!! 

Lover
New Member
9 0 0

Hello I have another question! For some reason  there has been extra space and pading over the image before we click it in some products now? 

IMG_0BB76D9DE42A-1.jpeg