Vertical align button to bottm

Hello,
I have checked various threads for a solution but am unable to get one working.
I have a simple row with 3 columns and would like to align the button to the bottom of each.
I have a global block element you can see here

Hey @BigStache,

Please first add a class to your row like bottom-buttons. Then, apply a bottom padding to all your 3 columns greater than the height of your buttons. Or, we can just set this up with CSS since we’ll be using it anyway. If you don’t know the height, you can just experiment with the value. Then, we need to use custom positioning CSS to stick the button to the bottom regardless of your content’s height.

Add this code to your page’s Content CSS:

.bottom-buttons .x-column {
    padding-bottom: 80px;
}

.bottom-buttons .x-anchor-button {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

The result should look like this:

That does not look right so it’s up to you if you’ll set a width for your buttons. A width setting is available in the button’s options. Or, you can add a width property to the CSS above like width: 80%;

Regardless of your content’s legth, it will stay at the bottom.

This is how it will look on mobile.

Just note that this is not something that we can do out of the box with Cornerstone / Content Builder yet. What I’ve showed you is beyond the scope of our support so if you encounter issues with it or need further enhancement, you would need to consult with a web developer.

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.