X-Cart forums

[nickff]

Hi All,

On a new site I'm building, I'm using some "responsive web design" so that the layout of the site automatically responds to the size of the screen, adjusting as necessary. This technique utilizes Ethan Marcotte's "Fluid Image" concept to resize images on the fly.

I have this working great on this site, with one exception - detailed product image thumbnails. These images refuse to resize dynamically. They stay the same width, no matter what.

Try resizing your browser window on this page, and you'll notice that the large product image correctly scales as you resize, while the thumbnails do not:

http://future.thefutureforward.com/~field/dopp-kit.html

I've realized that the width of the divs around the thumbnails (.dpimages-icons-box) is set by the configuration setting "Maximum width of a detailed product image thumbnail" in the detailed product image settings in the admin. This is a required field in the admin and I've tried overriding that width setting by hacking "SITE/MODULES/DETAILED_PRODUCT_IMAGES/PRODUCT_IMAGES.PHP" to no avail.

If anyone has any ideas as to why those images aren't resizing, and how to UNSET the fixed width of the divs around the images, that would be amazing!

Thanks so much.

[JWait]

Are you using generated thumbnails or uploaded ones?

[nickff]

I think detailed image thumbs are always generated.

And I actually got it working by placing a div around each individual thumbnail, and then using Ethan's responsive design formula for the width and margin percentages. Check it out by resizing your browser here:

http://future.thefutureforward.com/~field/dopp-kit.html