Category Page: Fixed height or based on image

[jamied1981]

Hi,

I have a number of product feeds that import products from a number of different webstores. I’ve set the width of each image to be 270px wide and have left the height as blank, so it defaults to the correct scaled down size when importing the images.

I have a problem however that when a image is imported and is smaller than the largest height image it crops the images in that category. example found here – http://districity.com/product-category/tops/page/9/ . I’ve noticed some styling that overwrites my own styling…

<figure style=”padding-bottom: 303px;”>

Is there a way to remove the height, so it just scales down the image, but the product titles are at different levels etc. Or is there an easy way to set a minimum height so I can set this to the largest height image.

Cheers,

Jamie

[Mohammad – SUPPORT]

Hi,
Please use this custom css to use minimum height
.woocommerce ul.products li.product a img{min-height:377px;} /* you can change the height*/

Thanks 🙂
With Best Regards
Swift Ideas

[Kyle – SUPPORT]

Hi

Not sure if it’s good practice to not set the height for your images, also not sure if it will work like you want it to. I think the image height is worked out by the height of the first image. It’s the way woocommerce works. Changing the padding may cause issues on smaller screens as the padding is worked out for each screensize

– Kyle

[jamied1981]

Hi Kyle/Mohammad,

Thanks for the feedback. I will look into these and let you know. Ideally I’d just want the area the images sits in to be a fixed height, not the actual image. I don’t mind white space between an image and product title, just as long as the largest image displays correctly.

Please let me know if there is anything I can do to get this functionality?

Thanks,

Jamie

[Melanie – SUPPORT]

Hm, something like

.woocommerce ul.products li.product figure {
height: 44px;
}

?

[jamied1981]

Hi, it doesn’t seem to work. I’ve tried …

.woocommerce ul.products li.product figure {
height: 44px;
}

and also

.woocommerce ul.products li.product a img{min-height:377px;} /* you can change the height*/

But the problem is when the first product is the correct height it adds whatever height I add to the bottom, creating a lot of white space. Any other suggestions?

Thanks,

Jamie

[Mohammad – SUPPORT]

Hi,
Please upgrade to latest version of theme Neighborhood 1.70 out last night and let me know your feedback .

Thanks 🙂
With Best Regards
Swift Ideas

[jamied1981]

Hi, I have updated the theme, and I have modified the …

.woocommerce ul.products li.product figure {
height: 420px;
}

It’s almost worked, however it adds the image below, so duplicates, if the image is less than 420px. Am I right in saying I need to edit a template to remove the duplicated image?

Please let me know details.

Regards,

Jamie

[Mohammad – SUPPORT]

Hi,
Please use given below code and let me know feedback
.woocommerce ul.products li.product figure{height:auto;}

Thanks

[Holly & Trisha]

was there any conclusion? I have the exact same problem.

Thanks

[Mohammad – SUPPORT]

Hi,
This issue has been fixed at latest version of theme 1.93.
Thanks
Mohammad