Aligning elements at the bottom of columns

  • Resolved igor4wp

    (@igor4wp)


    1 year, 9 months ago

    Hi community,

    I’m urgently migrating from old platform and have to re-build everything

    Unfortunately, my knowledge of CSS is close to zero, maybe you can help with a couple of snippets that will:

    # align buttons at the bottom of the columns https://prnt.sc/mI0s1Kvq1iLV

    # aling “Read more” links at the bottom of the columns https://prnt.sc/Dddf0qXc4Ko-

    Many thanks in advance,
    Igor

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter igor4wp

    (@igor4wp)

    1 year, 9 months ago

    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)

    Kara Honasan

    (@karahonasan)

    1 year, 7 months ago

    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 1 year, 7 months ago by Kara Honasan.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Aligning elements at the bottom of columns’ is closed to new replies.