Vertically Align buttons at the bottom of columns inside row with text above on each column of different length

[ban]

Hi, how can I vertically align at the bottom all the buttons inside the columns having text above?
Thanks

[nabeel]

Hi Iban,

Thank you for reaching out to us. To bottom align the buttons, please follow the Flexbox method described here https://michaelbourne.ca/create-columns-equal-heights/286/ or you can follow this thread:

Equal-height columns

Hope this helps!

[ban]

Hi, thank you.
I have added the code but it is not doing it. I don’t know why

[benursal]

Hi Iban,

Try out the code below… But before you try it, please watch this quick video (http://somup.com/cqjt1oeuOc) that shows you where to add that code, what parts of the code you can change, a possible roadblock to this code (and also a solution to that roadblock):

$el.x-container .x-column{
  height:300px;
  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;
}

Hope this helps,
Ben

[ban]

Thank you so much, that worked.

It looks good, the thing I see though is that it is not responsive. What can I do?

[friech]

Hi Iban,

Let’s try adding flex-wrap: wrap; on Ben’s flex code.

e.g.

$el.x-container .x-column{
  height:300px;
  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;
flex-wrap: wrap;
}

If that did not work, please remove Ben’s code altogether, and add this to Page > Content CSS instead.

.flexme.x-container {
  display: flex !important;
  flex-wrap: wrap; /*wraps the columns on mobile view*/
}
.flexme .x-column {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	align-content: space-around;
	padding-bottom: 2em;
}

.flexme .x-column .x-anchor-button {
  margin-top: auto !important; /*push the buttons on the bottom of columns*/
}

Then add a Class flexme to your ROW.

• 

Lastly, add a gap element under the text. This will maintain the gap between text and button on mobile view.

Hope it helps,
Cheers!