Craft Theme: Product Page Magnified Image not stacked (Zoom)

[nar_52]

Hi,

i hope somebody can help. I'm planning to use the Craft Theme.

On the product page the magnified images are  displayed as a stack. Is there a way to:

Option 1: display the magniefied image individually as in the mobile version

or

Option 2: to scroll through the magnified images with arrows?

(i would prefer option 1)

The Theme is in draft. So i can't provide an url.

Thank you. 

[MandasaTech]

Hello @nar_52 
Please share your website URL.

[nar_52]

@Drekliyer  @MandasaTech  My current Theme is Minimal and not Craft. So there is no way to share a url and password to the draft.

[nar_52]

@Drekliyer @MandasaTech  i'm sorry. There isn't a way, that i know off, to give access to a draft theme. Here is a screenshot of the magnified product images, which are stacked.

 

[LitExtension]

Hi @nar_52,

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

@media screen and (min-width: 750px) {
  .product-media-modal__content>* {
    max-width: 30rem !important;
    display: block !important;
  }
}

Hope it helps!

[nar_52]

Hi @LitExtension,

thanks for your response. Unfortunatly this didn't do anything regarding the display of product images in the magniefied version (see attached screenshot). It is already blocked/stacked.

I would prefer them to be displayed

Option 1: individually as in the mobile version.

(In the mobile version: If you want to see image 2 magnified. You click first on the image 2 and afterswards you can magnify it)

Option 2: to scroll through the magnified images with arrows?

Any idea?

Thanks again.

[LitExtension]

Hi @nar_52,

If you want to display by option 1, please change code:

@media screen and (min-width: 750px) {
  .product-media-modal__content .global-media-settings.active {
    max-width: 90%;
  }
}

you can manually change the width to your liking, it will display fine

[nar_52]

Hi @LitExtension,

thanks for your response. Unfortunatly this didn't help either. My problem isn't the width of the images. I didn't want the product images to be displayed alltogether in the magniefied mode. In the magnified mode all product images are shown one below the other.

[LitExtension]

Hi @nar_52,

Please send me the preview link, I will check it for you

[LitExtension · Accepted solution]

Hi @nar_52,

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

.product-media-modal__dialog .global-media-settings--no-shadow {
    display: none !important;
}
.product-media-modal__dialog .global-media-settings--no-shadow.active {
    display: block !important;
}

[nar_52]

Hi @LitExtension,

it worked. Thanks so much.