Docs

[John F]

Hey All,

Great theme and my site is almost perfect, I’d appreciate your help with my store images. I would like all of them images to have a similar sized box, I know that the images may be slightly different in size, but at least it will look clean. See attached for example from my old site prior to upgrading to X for what I’m looking for. Thanks!

[John F]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.woocommerce li.product .entry-featured img {
    min-width: auto;
    max-height: 170px;
    width: auto;
    margin: 0 auto;
}

Hope it helps 🙂

[John F]

Thanks Thai, I put in the CSS and it definitely looks better. Is there a way to make it slightly larger? I like the look of 300px, but then things aren’t aligned. Thoughts?

Thanks!

[Joao]

Hi John,

If you want the images to have more height and be aligned at the same time I would reccomend you re-uploading all the images with the same size with the desired proportions and than you can play with the value from 170px to 300px, and it would be maybe even uncessary any CSS to have them aligned.

I have done a few tests and with the images you have there the solution that Thai gave you seems to be the optimal solution.

Hope that helps,

Joao

[John F]

Hey Joao, is there anyway to get it closer to the uploaded example I gave from my last theme? The images were the same size as they are now, but larger and looked cleaner.

I feel like there should be a way through CSS to do this…

Thanks!

[Lely]

He John,

There’s a way in CSS to make it aligned and 300px in height, but that is not advisable because the images will be stretch and blurry. Your images width and height proportion differs from each other. For other images, to achieve 300px height means that it needs more width of the container. The best option is to upload new images as suggested by the Joao. Since the image maximum width will depend on it’s container, we cannot adjust it’s height. Because forcing to adjust the height without adjusting it’s container width will result to stretch image.

Hope this helps.

[Author]

Posts