Overlapping images in Internet Explorer

[wowflak]

Hi,

I have a page where the images all overlap on IE. I have tried some suggestions I have found but no dice.

Here is the page:

Homepage | Concord Theatricals

Thanks

[nabeel]

Hey @wowflak ,

Thank you for reaching out to us. The oversized image issue in IE happens because IE behaves differently and needs either the Width and/or the Max Width options of the image element to be set specifically.

Try setting the Max Width of all your images to 100%.

If you want 100% to be the default value of the Max Width, you can save it as the Image element’s preset and then save it as Element Default. To learn more about default settings please see Element Defaults section here https://theme.co/apex/forum/t/template-manager/20364

Let us know how this goes!

[wowflak]

Hi
That is not working, just makes the image bigger and more of an overlap in IE.

Also note these images are part of a modal toggle

[nabeel]

Hi again,

To resolve the issue, you can try adding the following code in the Theme Options > CSS:

.no-preserve3d .x-anchor .x-image {
    width: 100% !important;
    max-width: 100% !important;
}
.no-preserve3d .x-anchor .x-image img, .no-preserve3d .x-anchor, .no-preserve3d .x-anchor.x-anchor-toggle {
    width: 100%;
}

.no-preserve3d .x-anchor .x-graphic, .no-preserve3d .x-anchor .x-anchor-content {
    display: block !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[wowflak]

That worked!

Thanks so much.

[nabeel]

Hi @wowflak,

We’re glad it worked. However for a native solution you can try out the following settings (see screenshot) of the toggle

Feel free to make adjustment for Max Width

Cheers!

[avoytas]

I had this same issue. setting Max Width to 100% fixed it for me.

[christian]

Glad you’ve sorted it out using only the option, @avoytas.