Image stretching issue when viewed on iPad

On the iPad, when you enlarge the image the image is stretched. It is fine on a laptop or p.c.

Can you please let me know how to fix this. The link to an example is below. Clicking (enlarging) the main picture on the iPad causes it to stretch out.


http://www.focalpointfurniture.co.uk/index.php/dining/detailed-cream-mirror-detail

Thanks

Hi

Please try to add this code to css:

Code: Select all

.sbox-content-image img {
    height: auto !important;
}


That has not fixed the problem. It still does it.

Hi

Ok. Please show me a screenshot of this problem. Maby I've understood it wrong.

I have the same problem in Safari on iPhone, iPad and Mac. The image in the lightbox is stretching in width and does not fit the screen at all.

Look here: http://goo.gl/O5zU4

Hi

Try add this code and show me Your page than:

Code: Select all

.sbox-content-image img {
    width: 100% !important;
    max-width: 100% !important;
}


@teitbite

Hello, I have the same problem.

When I try to use your code in /media/system/css/modal.css, in place of the original property, but nothing change.

Can you help us?

Thanks,

Jeremy

Hi

Can I please see a site with code I've suggested ? Maybe a small modification to it will help.

Yes, here is the url: http://goo.gl/bJiW8

Thank you,

Jeremy

Hi

Please try to add this to css:

Code: Select all

.sbox-content-image img {
    height: auto;
}

#sbox-window.shadow {
    height: auto !important;
    left: 25% !important;
    width: 50% !important;
}


Thanks !

It works, I just changed the code a bit:

Code: Select all

.sbox-content-image img {
    height: auto;
}

#sbox-window.shadow {
    height: auto !important;
    left: 33% !important;
    width: 31% !important;
}


Hi

Ok, no problem. Glad I could help.