Hi,
We recently purchased the Natura template, and now our product detail page is all CSS. We implemented magicthumb as well, which we have always used in the past. But now, using the default ectstyle.css, the product pictures are ok until you start clicking on the thumbnails. Then the pictures intrude into the product name and product description area to the right of the pictures. I don't know how to stop it doing that.


Help please!!!

Hi

Can you let us know where you have that set up and we'll take a look for you?

Andy

Please feel free to review / rate our software

Thank you Andy.

Here is the URL: https://www.intelligenthomeonline.com/proddetail.php?prod=c5hslyrablk1

Just a note: if you use the magiczoom feature, its ok, the picture superimposes over the text, and then disappears when you close it. It is only the magicthumb feature which causes the pic to interfere with the text.

I think it's the way you have the image set up, they have a lot of white space to the left and right of the graphic so with that white space they don't fit into the space.

I can see a few solutions, make div.detailimage more than 26% - but then anything on the right will need the width decreased

OR

Remove the white space on the graphics

OR

add this to ectstyle.css

.MagicThumb img{
max-width:100% !important;
height:auto !important;
}

Andy

Please feel free to review / rate our software

Hi Andy,

I tried your first and third solutions.

Changing div.detailimage immediately bumps the product name and description below the pictures, rather than alongside the pictures. We don't want that.

Adding the Magicthumb img didn't make any difference that we could see.

The second solution is not a possibility - we have thousands of images created over about five years.


I will tinker around with the Magic thumb css file and see if I can work out which one limits the size of the image after its clicked on.


Thanks for your help.

quote:

---

Changing div.detailimage immediately bumps the product name and description below the pictures, rather than alongside the pictures. We don't want that.

---

If you increase the percentage defined in div.detailimage you would need to make an equal decrease in the % width of div.detailname h1 and div.detaildescription along with anything else which might be displayed to the right of the image.

Andy

Please feel free to review / rate our software

Hi Andy,

I added:

.MagicThumb img{
max-width:100% !important;
height:auto !important;
}

to the magicthumb.css rather than the ectstyle.css and it works! Problem solved. Thank you for your help.

Irina