Aligning elements at the bottom of columns

I’ve managed to align buttons at the bottom of the columns!

.butbot .stk-block-column__content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.stk-block-button-group {
flex-grow: 1;
display: flex;
align-items: flex-end;
}

(.butbot is a custom class created to narrow the focus of the snippet above)

Maybe someone can help to find where is the mistake in my snippet so it will align “Read more” links at the bottom of the columns https://prnt.sc/Dddf0qXc4Ko-

I’ve tried similar approach but can’t identify the correct classes:
.texbot .stk-block-column__content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.stk-block-expand__show-button {
flex-grow: 1;
display: flex;
align-items: flex-end;
}

(.texbot is a custom class created to narrow the focus of the snippet above)

Hi Igor!

We already discussed this via email a while back, but please still allow me to relay our conversation here for the sake of other users.

To align the Read More link while using the Free plugin, just follow these steps:

1. Add custom-column class in each Column block

2. Add custom-expand class in each Expand/Show More block

3. Add this Custom CSS to your Theme Customizer:

.custom-expand .wp-block-stackable-button.stk-block-button.is-style-link.stk-block-expand__show-button.stk-block {
position: absolute !important;
bottom: 0 !important;
}

.custom-expand {
position: static !important;
}

.custom-column .stk-block-content{
position: static !important;
}

If you are a Premium user:

Add this Custom CSS to each Expand/Show More block:

.wp-block-stackable-button.stk-block-button.is-style-link.stk-block-expand__show-button.stk-block {
position: absolute;
bottom: 0;
}

…And then in each Expand/Show More block, navigate to the Advanced tab in the inspector, and then inside the Position panel, set the Position to Static.

Then add this Custom CSS to each Column:

.stk-block-content {
position:static;
}

• This reply was modified 2 years, 2 months ago by Kara Honasan.