[Resolved] CSS for same height columns and bottom-align button doesn’t work

[Rudy]

Hi,

I’ve read several topics on this forum and read Tom’s Code Snippets about having the same height for columns and have all the buttons align at the bottom of the container, but it just doesn’t work for me.

I can’t figure out what I’m doing wrong and I’m not advanced enough to explain everything I tried before I posted this message.

Here’s what I have right now : https://www.screencast.com/t/OMyRxcL8YMa

I’d like to have the 3 columns aligned with the buttons at the bottom.

Could you help me please ?

[Rudy]

Update : I just found this piece of code

.generate-columns > .gb-container,
.generate-columns > .gb-container > .gb-inside-container{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.generate-columns > .gb-container > .gb-inside-container > *:last-child {
    margin-top: auto;
}

Looks like I’m almost there, but now the image is lowered as well 🙁

[Ying]

Hi Rudy,

Try this CSS instead:

.home .generate-columns .gb-grid-column {
    flex: 1;
}
.home .generate-columns .gb-button-wrapper {
    margin-top: auto;
}
.home .generate-columns .gb-container, .home .generate-columns .gb-container .gb-inside-container, .home .generate-columns .gb-grid-wrapper, .home .generate-columns .gb-grid-wrapper .gb-grid-column:last-child{
    height: 100%;
    display: flex;
    flex-direction: column;
}

[Rudy]

Thank so much, we’re almost there.

Now my min-height setting for the featured image is not taken into account anymore :

I’m trying to understand your code to find out what might cause some images to be taller than others, but no luck 🙁

[Ying]

Try add this CSS:

.home .gb-grid-wrapper > .gb-grid-column > .gb-container.custom-dynamic-image {
    height: unset;
}

and change this CSS to:

.home .generate-columns .gb-container, .home .generate-columns .gb-container .gb-inside-container, .home .generate-columns .gb-grid-wrapper, .home .generate-columns .gb-grid-wrapper .gb-grid-column:last-child{
    height: 100%;
    display: flex;
    flex-direction: column;
}

to:

.home .generate-columns .gb-container:not(.custom-dynamic-image), .home .generate-columns .gb-container .gb-inside-container, .home .generate-columns .gb-grid-wrapper, .home .generate-columns .gb-grid-wrapper .gb-grid-column:last-child{
    height: 100%;
    display: flex;
    flex-direction: column;
}

[Rudy]

Thank you very much for your time and your help 🙂

[Ying]

You are welcome 🙂

[Author]

Posts