Row Three Columns, Equal Height > Align Content

Hello. I have set up a page with one row divided by three columns and check the row options to have equal height. But the content inside is not the same and i want to align and distribute the content equally in different screen sizes.

I tried to use some CSS, e.x:

height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;

But the columns goes the one below the other. Can you help me please?

Hi,

But your columns have different amount of content and that is why bottom buttons are look not inlined https://gyazo.com/dac35f4d4436ccae28e34fbd35f21950

Regards

Title:

Content:
Yes i know but i think there is a way to make them align properly.

Please check this video of what i am trying to explain to have a better idea.

https://youtu.be/eCs6ay5k9jc

This video demonstrates how to align the content with some other builder and with custom CSS code. But how exactly would you like to align your columns? Do you just want to make button always at the bottom of the column?

Yes i want the buttons always on bottom and headings always on top. Is this possible?

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.columnstore .wpb_wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	        flex-grow: 1;
}

.columnstore .woodmart-text-block-wrapper {
	-webkit-box-flex: 1;	
	-ms-flex-positive: 1;
	flex-grow: 1;
}

Regards

It works!!! Many many thanks!

You are welcome!

[Author]

Posts