Column button issues

[morrmeroz]

Hey! I’m trying to have a button be always close to the bottom of a column. If you look at this page:
https://www.bloopanimation.com/aaa-courses-test/

You’ll see that each column has a “course details” button. The issue is, that depending on the text above it, it changes its hight on the column. I want it to alway be at an equal distance to the bottom of each column. How can I do that?

[nabeel]

Hi Morr,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. Assign your Row a class e.g flex-row that has columns with button and then add the following code in the Theme Options > CSS:

@media screen and (min-width: 980px) {
    .course-column {
        display: flex !important;
        justify-content: space-between;
        flex-direction: column;
        align-items: end;
    }

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

If this doesn’t work as intended then you can follow this thread https://theme.co/apex/forum/t/vertically-align-buttons-at-the-bottom-of-columns-inside-row-with-text-above-on-each-column-of-different-length/63146/6

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps!