Image overlapping text in IE

[alandoyle]

Hi,

I have an issue with a few pages on a newly created website. I’ve a number of sections where there is a short colum with text next to a larger image (1/4 - 3/4). While everything looks fine on my Mac (Safria, Firefox and Chrome) my client is having issues on her PC using Internet explorer. See screen grab attached.

How do I fix the issue she is having?

(Please note that all screen sizes and mobile version work fine at our end in all browsers).

Thanks

[rad]

Hi @alandoyle,

Thanks for reaching out.

May I know the exact URL where this page is? I checked the site and it seems to be correct one but I can’t find the exact page in your screenshot.

And have you added it as SVG image? I recommend adding it as standard image else IE has issues with SVG. And please make sure both X theme and Cornerstone are updated, they are old and the versions don’t match as well.

Thanks!

[alandoyle]

Hi,

The site can be found at https://castlelandpark.ie/house-types/

To answer your questions:
No, I have not added SVG they are PNGs
Yep, both X-theme and Cornerstone are up to date (6.4.6 and 3.4.6 respectively)

I’ve an under construction screen up at the moment. you can access the site using DNGSkerries1X2B

Thanks

[rad]

Hi @alandoyle,

Ah, I was looking at a different site. In that case, please provide your admin login credentials as well as it’s currently behind a coming soon page.

Thanks!

[alandoyle]

Thanks @Rad,

Details as follows (see secure note)

(Client just mention it display perfectly in Chrome on her PC)

Appreciate you help on this.

[alandoyle]

Hi, my client has just informed me that the issue is resolved after she cleared her cache.

I did change the rows to sections and this may have fixed the issue.

Thanks for your help.

[nabeel]

Hi @alandoyle,

I tried to access your admin panel but i get a 403 Forbidden error instead (see screenshot)

This 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. Or you can set all your images in your page to 100% max width by adding this code in your page’s Content CSS:

.x-image {
    max-width: 100%;
}

Let us know how this goes!

[alandoyle]

Thanks - I’ll try that on the next site.

Thanks for ur help

[rad]

You’re welcome!