Craft theme: product page magnified image size

Store Design
1

Hi, I just found that the magnified image size of product page is too big for both desktop and mobile. Anyone know how to adjust the popup image size? Thanks in advance.

2

Hi @KatyLee ,

Go to Assets > base.css and paste this at the bottom of the file:

/* size for mobile */
.product-media-modal__content>* {
  max-width: 50rem !important;
}
/* size for desktop */
@media screen and (min-width: 750px) {
  .product-media-modal__content>* {
    max-width: 100rem !important;
  }
}

You can change the size to your liking.

Hope it helps!

3

Hi,

Thanks so much for your code! It works perfectly on desktop but nothing change on mobile even i set to 1 rem. Do you have any idea on it?

Thanks a lot.

4

Hi @KatyLee ,

Please send your site and if your site is password protected, please send me the password. I will check it.

5

Hi , It works fine on mobile as well. Thanks.

6

Wow thanks, that helped me too so much!

7

Thank you. Helped me so much.

8

Hi @LitExtension

is there a chance, that you have a solution for my problem?

https://community.shopify.com/topic/1842323

Thanks.

9

That is great and helped a lot. Earlier my images on desktop spread out to fit the entire screen, destroying every image.

But, is there a possibility to have the actual image width as the max-width? So it show the image bigger, if it can, but doesn’t try to expand a small image?

10

Hi @johstrom ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

11

@LitExtension , please check:

Change appearence size on magnified image in Craft theme - Shopify Community