Aligning divs to bottom in cornerstone

[TushitaKBC]

Hey team

I was trying to align my content to the bottom on this page

I added this css

.blue-benefits-content {
  position:absolute;
  bottom:0;
}

But, when I apply it to the four columns they all align left. I tried a few variations on alignments, but with no luck. Presently the blue-benefits-content class is not active. Can you tell me what I need to add to that code to keep the four column structure, but with each element flush with the blue footer bar?

Cheers

[paul.r]

Hi,

Please change your code to this.

.blue-benefits-content {
    display: inline-block;
    float: none;
    vertical-align: bottom;
}

Then add blue-benefits-content in the class field of your columns.

Hope this helps

[TushitaKBC]

Hi Paul

I am getting the same results with that code. I left it live on the page so you can see how it works. If I add blue-benefits-content to all the columns they all align left and above.

Do you have another suggestion?

[friech]

Hi There,

I have another suggestion, lets use flexbox. Please add this to Theme Options > CSS

.blue-benefits-content-row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

Then add a class blue-benefits-content-row to the ROW, (not on the 1/4 columns).

Hope it helps,
Cheers!

[TushitaKBC]

That is it. Set the row with the id: blue-benefits-content-row and then the rest of the code works!

Thanks so much guys. It is going to look amazing.

[albrecht]

You’re most welcome

[Murakami]

If I understand correctly, to use flexbox in the “content” editor using pro I have to write “flex css” in the global css panel, am i right?

[friech]

Hi There,

Yes, you need to write flexbox CSS manually if you want to use flexbox on the Content.

No plan to add flex options to current sections/rows, but we would like to make a new content grid in the future.

Cheers!