Vertical align image at bottom of column

[brettfish]

Hi - I have a row of items with a text label followed by an image in each column. The text label lengths vary and can break to multiple rows, and I’d like to keep the images aligned, so I’m thinking to align the image to the bottom of each column would achieve that to allow for the variations in the text labels. I’m also open to other recommendations on how to do it. I’ve tried suggestions in multiple support threads but none are working for me. I have marginless columns turned on in that row and it’s still not working

Summary

Website URL: shoezeum.com/nike-moon-shoes

It’s the last section of the page

THANKS!

[nabeel]

Hi @brettfish,

Thank you for reaching out to us. To align the images at the bottom, please find this code in your custom CSS:

.align-middle .x-container.marginless-columns .x-column, .align-middle .x-container.marginless-columns .x-column img {
    vertical-align: middle !important;
}

And replace it with:

.x-section.align-middle .x-container.marginless-columns .x-column {
    vertical-align: bottom !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[brettfish]

thanks - this is aligning everything in the column to the bottom, and I want to keep the text labels at the top and align the images to the bottom, is that possible? I’m just trying to align the images equally despite the text in each of the 5 columns varying in length and sometimes breaking into more than 1 line

[friech]

Hi @brettfish,

Please add the custom CSS below on your ROW’s Element CSS area

$el.x-container .x-text.x-text-headline {
	min-height: 50px;
}

What it does is to have your headlines an equal height regardless if it wraps or not.

Note: Something is strange on your Theme Options > CSS, please check it here and address all found errors (if any).

Another thing, there is a line element under the “First Moon Shoes To Cross The Finish Line” headline, please remove that line element or else the second image will not align with others.

Hope it helps,
Cheers!