Aligning content when images are not the same height

[lesliekirk]

When the category thumbnails are not all equal height the Product Name, Product Price and Add to Cart button can wind up at different places in the row (I'm sure many of you have seen this happen). Each of the

<div class="o-layout__item u-text-center x-product-list__item">

maintain equal height within the section (thank you flex) but the content within the div is dependent upon the image height. It would be great if the content could be aligned to the bottom. I'm trying to find a "simple" solution that moves everything except the image to the bottom of the div.

[Matt Zimmermann]

Hi Leslie,

You could probably use a combination of flex features to make this happen or you could try adjusting the height of the picture element by breakpoints, although that could get messy.

[lesliekirk]

Hi Leslie,

You could probably use a combination of flex features to make this happen or you could try adjusting the height of the picture element by breakpoints, although that could get messy.

Thanks Matt - I'll keep trying. Maybe a wish list for future frameworks - maybe "assume" that not all thumbnails are the same size but that it would be "elegant" to have a layout that takes that into consideration.

[Bruce - PhosphorMedia]

IMO, adding (if not already present) an independent container for the images and setting a min-height value would do the trick. (Unless Colossus is resizing images for various screen sizes, you'd only need the one statement.)

[lesliekirk]

IMO, adding (if not already present) an independent container for the images and setting a min-height value would do the trick. (Unless Colossus is resizing images for various screen sizes, you'd only need the one statement.)

That would be the ideal way to do it but that's not quite how Colossus has it laid out...