for some crazy reason, woocommerce has image width set like this:
div.product div.images img,#content div.product div.images img{width:100%}
when it should be this:
div.product div.images img,#content div.product div.images img{width:auto; max-width:100%}
this will prevent images from stretching out beyond their natual size, but will allow them to collapse if the div they are in is more narrow
bheadrick – have you opened a ticket for this issue? Might benefit many others in the future.
Well, this is their answer to the problem:
http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/
so I don’t think they would really consider it a “bug”
but if you don’t want to have the product thumb to be that big, then my solution above will do the trick.
No, it certainly is not a bug however it is not a practical implementation. width 100% should only be set and triggered when size has already been reduced responsively then the 100% width would be correct as it tries to fill the container with the image.
Another words, by default, max-width:100% is the correct implementation in a responsive design.
Awesome. Thanks for the replies! I actually did switch to width:auto but didn’t get a chance to get back and update my question. Thanks for starting a ticket as well!
And this is the answer:
We use width 100% so the product grids are consistent. I don’t think there’s any excuse to use smaller images than the design intends?
Actually they don’t need “width:100%” to maintain consistency. They can simply grab the width of the product image settings in WooCommerce and let that determine the width of each grid item.
… just for example my Theme is using grids and images are still max-width. They should be like this:
img {
-ms-interpolation-mode: bicubic;
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
You can also override WooCommerce styles within Child Theme and be done with it 🙂
Thanks,
Emil
Emil. Would this work in your excellent Responsive Theme?
Sounds like the steps would be:
1) copy WooCommerce style sheet to child theme (woocommerce.css?)
2) change the image properties that I find there to what you outline:
img {
-ms-interpolation-mode: bicubic;
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
AM I understanding this correctly?
I would say so and this is already in Responsive 🙂
One thing I’ve noticed is that the product title doesn’t change in responsive. Then when a product (with image) is viewed on mobile the product title breaks up onto multiple lines. Is there a way to set the title text so it responds as well?
How would I go about doing that?
Is the font in ems instead of pixels? That will certainly help some.
I will have to check. I am using Emil’s Responsive Theme that is optimized for WooCommerce. Therefore I’m a little skeptical about changing certain things that might actually hurt what the Theme does automatically.
