Return to previous page

Image resizing/presentation issues - by dblomster

This topic has 7 replies, 2 voices, and was last updated 8 years, 4 months ago ago by Olga Barlow

dblomster

Participant

October 26, 2016 at 14:10

Hello,

I’d like some help to sort out some product image issues in the XStore theme. In WooCommerce, I’ve set catalog images to 204×204 px with no cropping and then regenerated all images. Still, on the products page where I have 5 products per row, some images are shown with up to 1063 px, even though natural size is 38×203 px. I’ve tried to set product-image-wrapper css class to fixed height 203 px, but then the image is cropped. The width seems to be set at 204 px at all times for some reason?

Related product images are way too big as well.

I haven’t even checked this in mobile view yet, trying to figure out this in desktop mode to start with.

I’d like to add that product image presentation usually get messy in all WooCommerce themes, since I use all kinds of sizes and ratios. But in the end, I always manage to figure it out by altering css. But haven’t found a solution for the XStore theme yet.

Thanks.

#144010 Copied Theme version: 2.5 WooCommerce version: 2.6.6

6 Answers

dblomster

Participant

October 26, 2016 at 15:49

Ok, so I’m trying to solve this on my own until you can respond.

I tried to add custom css:

Global Custom CSS:
.product-image-wrapper { height: 204px !important; }

Custom CSS for desktop:
.product-content-image img { min-width: 0 !important; }

It looks better on desktop now, but still no solution for mobile view etc. I’d like help to come up with a solid solution across all browsers and image presentations (shortcodes etc).

Thanks!

#144027 Copied
Olga Barlow

Participant

October 27, 2016 at 06:53
Hello,

Remove .product-image-wrapper { height: 204px !important; } because it will stretch your images.

Add the following code instead

.content-product .product-content-image img { width: auto; }

Regards
#144069 Copied
dblomster

Participant

October 27, 2016 at 10:57

Thanks for your answer.

By removing the fixed height, the products are no longer aligned on a straight line, so that approach is not acceptable. See comparison: http://prntscr.com/czjkw1

In fact, images are not stretched by adding a fixed height to the image wrapper (not the image itself). I haven’t found any at least.

The solution I came up with seems to work fine on desktops, but there are still issues with other views. Please see if you can come up with a neat solution for all views.

#144125 Copied

Olga Barlow

Participant

October 27, 2016 at 13:03

Hello,

I see. Could you, please, provide temporary access to your admin panel? We’ll try to help you.

Regards

#144150 Copied
dblomster

Participant

October 27, 2016 at 13:27
Thanks for your willingness to help me.

There’s a lot going on at the dev site with multiple plugins and custom code, so I prefer to solve this without giving access to the particular site.

Now I have this in Global Custom CSS:

.product-image-wrapper { height: 204px !important; } .product-content-image img { width: auto !important; } .product-content-image img { min-width: 0 !important; }

This seems to work for now, even though there’s a lot of testing left to do.

I’ll surely get back to you with additional questions regarding the XStore theme.
#144151 Copied
Olga Barlow

Participant

October 28, 2016 at 14:14

Hello,

Ok, sure. Feel free to ask if you need any other help.

Regards

#144305 Copied
Tagged: image, issues, presentation, resizing, themes, woocommerce, wordpress
Viewing 7 results - 1 through 7 (of 7 total)