Buttons align at bottom of column

Support
#1

Hi there!

How can I get the buttons to all align at the bottom of the column, regardless of the amount of text?

Thanks,
Austin

#2

Hi there,

Thanks for writing in! One possible solution would be to set a min-height to your content above the button. Then you can use gap element in between the button to create more space.

Hope that helps.

#3

Will that align the buttons at the bottom of the row or column? I’ve seen in other instances where someone will provide code or something that will assist with this. This is a huge piece of overall design of our site so more specific guidance would really be appreciated!

#4

Sorry I misread your suggestion. Yes that should work! Thanks!

#5

Glad to hear it :slight_smile:

#6

Actually I tried it on this page for example and it works when in full screen but it quickly gets out of line again. Any other ideas on how to make this work and be responsive? Is there a way to align them all at the bottom of the column?

#7

Hi There,

Good thing you assigned ID to that section, please add this to Theme Options > CSS

#business-owner .x-container.max {
	display: flex;
    flex-wrap: wrap;
}

#business-owner .x-column.x-1-3 {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#business-owner .x-column.x-1-3 .x-btn {
	margin-top: auto;
}

Hope that helps,
Cheers!

#8

This is great!! Thank you SO much. What about when it’s two columns like this?

I tried this but it doesn’t seem to be working.

#bottom-align-2 .x-container.max {
	display: flex;
    flex-wrap: wrap;
}

#bottom-align-2 .x-column.x-1-2 {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#bottom-align-2 .x-column.x-1-2 .x-btn {
	margin-top: auto;
}
#9

Hi There,

Let us use CLASS instead of ID because ID is intended to be unique for each element/section.

Please update the given code to this:

.flex-me .x-container.max {
	display: flex;
    flex-wrap: wrap;
}

.flex-me .x-column {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-me .x-column .x-btn {
	margin-top: auto;
}

Then apply the CLASS flex-me to the Section that you want to behave like the #business-owner section.

Cheers!

#10

Thank you so much for your help!! I switched the class and the section with three columns worked great, but the section with two didn’t work as well. On my screen the second column button is lower than the left. Any other suggestions??

Thanks,
Austin

#11

Hi there,

Please try adding mtn class to that button, it’s not aligned due top margin-top: auto.

Thanks!

#12

Hi there! I tried that but it’s still not aligning. Any other ideas?

#13

Hi,

Please add this code as well

.flex-me .x-column .x-btn {
    position:absolute;
    bottom:0;
}

.flex-me .x-column {
    padding-bottom: 30px !important;
}

Thanks

#14

Thank you!! Ok last question. Is there a way to have the top and bottom of the columns line up, instead of just the bottom? As you’ll see in the three column both the icons, header, and text are aligned, and then the text column is what streteches so that the button is aligned as well. Is this possible on the 2 column as well?

Thanks!!!

#15

Hi again,

Please change this part of the code:

.flex-me .x-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

To this:

.flex-me .x-column {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

Let us know how this goes!

#16

Perfect!!! Thank you so much :slight_smile:

#17

You’re most welcome!