align buttons to the bottom of row

  • Resolved sherissa_r

    (@sherissa_r)


    3 years, 10 months ago

    Hi, what is the right way to align buttons to the bottom of the row.
    I am using Gutentor container block, with 3 columns inside.
    Each column has Heading, paragraph and button.
    I want the buttons to be aligned to the bottom of the row.

    I don’t know what I’m doing wrong.

    The code I’ve been trying:

     .grid-container.wp-block-column  {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.wp-block-column .item-button {
flex-grow: 1;
display: flex;
justify-content: left;
 align-items: flex-end;
margin-top: 20px;
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter sherissa_r

    (@sherissa_r)

    solution:

    .wp-block-column {
 display: flex;
 flex-direction: column;
}

.wp-block-column .wp-block-buttons {
 margin-top: auto;
}
    Plugin Contributor codersantosh

    (@codersantosh)

    Happy to know the issue has been resolved ??

    Looking to accomplish something similar, I have the advanced columns with 3 columns inside and the gutentor button and would like the button aligned to the same spot in the bottom of each row (they all have different height content inside).

    Plugin Contributor codersantosh

    (@codersantosh)

    Hello @sdfbcxvxdsf ,

    If I understand correctly here are way to accomplish your requirements

    First Method

    • Add same length text content in each column.
    • For e.g. in single column there is a text and button. Then you have to use 100 word text length in all column. In this way your button will be always at same position in every column.

    Second Method

    1. Use container/cover block in each single column with same ‘Height’.
      (use Height option from advanced tab)
    2. Add position ‘Relative’ for container/cover block
      (use Position option from advanced tab)
    3. Then add other Gutentor elements inside container/cover block
    4. Lets assume that you want button at bottom of the every single column in same spot
    • For button element, use position absolute from ‘Advanced’ tab
    • ‘Position > Enable Custom Position > Absolute’
    • ‘Position > Position Align > Custom’ add bottom value to ‘0’

    Note: You must set height of container/cover block to achieve design as per your requirement i.e. bottom of column aligned at same spot.

    We have created a simple demo column-desing

    Best Regards!

    Thank you @codersantosh, second method worked great!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘align buttons to the bottom of row’ is closed to new replies.