How to Align Buttons to Bottom of 3 Columns in 1 Row

[core365]

Hi, I’ve already contacted yourselves regarding how to make all 3 columns the same height in a row, but now I’d like to align the buttons to the bottom of each column. I’ve tried to adapt the CS you gave me previously which works to a certain extent but then when I view it on a mobile device, the first 2 column buttons don’t align to the bottom, as the 3rd column button text splits onto 2 lines and throws it out!

Here’s the CSS I’m using - I’ve applied the flexmethod ID to the row:

.flexmethod {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-line-pack: stretch;
 align-content: stretch;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
.x-container:before {
 content: normal;
}
.container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex; 
 -webkit-box-orient: vertical; 
 -webkit-box-direction: normal; 
 -ms-flex-direction: column; 
 flex-direction: column;
}
.item-button {
 margin-top: auto;
}
.x-container:before {
 content: normal;
}

I’ll upload a screen grab too for you to see the issue I’m talking about. I’ll also put the URL in a secure note along with the By Pass Password as I’ve got a maintenance page up!

Thanks!

[jade]

Hey @core365,

Please follow the suggestion in this related thread:

Equal-height columns

Hope this helps.

[core365]

Hi @Jade,

Thanks for that, I’ve added in the CSS and the buttons are now aligned to the bottom of the column, however it’s split the 3 columns onto separate lines instead of being on the same row! I have no idea why it’s done that - most likely me doing something wrong - but I haven’t got a clue how to sort it, so I hope you can help!

Thanks!

[jade]

Hi @core365,

Please update this code:

.equal-height .x-column {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
}

to

.equal-height .x-column {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    float: left !important;
}

Hope this helps.

[core365]

Hi @Jade,

Thanks, that’s sorted the columns being split issue out, however when viewed on a mobile device the 3rd button splits onto 2 lines and the first 2 columns then aren’t the same height as the third! See screen grab below:

Thanks!

[friech]

Hi @core365,

The bypass password above is not working, please check. What you need to do with that button is to reduce its font size on mobile. As you can see its wrapping because the label of the button is lengthy than the other two.

This might work, try adding this to your Button’s Element CSS area.

@media (max-width: 979px) {
	$el.x-anchor-button {
	font-size: 70%;
	}
}

Adjust the 70% value where you see it fits.

Cheers!

[core365]

Hi, thanks, however I don’t want to reduce the size of the font to force the text to stay on one line for the button, as it would need to go really small on some mobile devices! If you see the screen grab I uploaded in my first post, the column heights were all the same and exactly how I wanted, the only issue was with the buttons not aligning to the bottom when viewed on a mobile device. In the latest screen grab I uploaded, the buttons are aligned to the bottom however the columns aren’t all the same height. Is there any CSS to force the height of the columns so they’re all the same, as reducing the size of the font isn’t a realistic option as it will need to go way too small for ‘Surfacing & Playground Markings’ to fit onto one line.

I’ve checked the Bypass Password and it is working correctly, so I don’t know if you may have copied in a space or anything like that at the end of it maybe?

Thanks!

[christian]

Hey @core365,

Try assigning a class to the row containing your marginless columns then use that class to apply a max-height to all the columns.

The code will look something like this:

.custom-class .x-column {
    max-height: 300px;
}

Hope that helps.

[core365]

Hi, I’ve assigned the class to the row and it has made the columns all the same height, however the background image isn’t filling the height of the column! So it’s still looking like the second screen grab I’ve previously uploaded.

Cheers

[jade]

Hi @core365,

Please add this code in the Global CSS too:

.equal-height .x-container {
    display: flex !important;
}

Hope this helps.

[core365]

Hi @Jade,

Excellent! Thank you, you’ve sorted it!

The only other thing I’ve now noticed is that when you view it on a smaller mobile device, the columns aren’t properly responsive in the way they’d usually drop down underneath each other onto 3 separate rows, they just squeeze all onto the one row still and the columns are really thin! Is there a way of sorting this?

Thanks!

[jade]

Hi @core365,

Apologies for missing that. Please update this code:

.equal-height .x-container {
    display: flex !important;
}

to

.equal-height .x-container {
    display: flex !important;
    flex-wrap: wrap;
}

Hope this helps.

[core365]

Hi @Jade,

Thank you so much, that’s spot on! Many thanks for all your time and help!

Cheers!

[friech]

We are delighted to assist you with this.

Cheers!