Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

How to push bottom block to the bottom when in a container

  • daveporter
    May 6, 2024 at 3:33 am

    Hi everyone,
    I am using the setting of ‘auto’ – margin top to ensure the last block in a flex based layout all line up.
    But if the last block is in a container with other blocks it does not work.
    E.g. a card has:
    Image
    Title
    Container with date, details, author & button
    This container is set to flex, but auto on the top margin does not work.
    How do I configure that to work ?
    My play area linked is working through Kyle @ TAB latest blog video!
    TIA, Dave

  • Ying
    May 6, 2024 at 9:08 am

    Hi Dave,

    the parent container of the container needs to be set to display:flex, flex-direction: columns, justify-content: space-between.

  • daveporter
    May 6, 2024 at 4:58 pm

    Thanks Ying,
    No joy with that suggestion I’m afraid.
    The parent container of the inner container is the Post Template block, I tried that using your settings and that didn’t work. The image, title, excerpt and button are just spread out (vertically) so the titles don’t line up!

    I also tried it’s parent container, but no luck there either.

    This is a play site, if you need access let me know…
    Cheers, Dave

  • Ying
    May 6, 2024 at 5:28 pm

    1. Set the blog-card container to display:flex, flex-direction:columns.

    2. Set the parent container of the read more to flex-grow:1.

  • daveporter
    May 6, 2024 at 5:47 pm

    Yes! Working now, thanks so much…

    An interesting observation – each row (of 3 on desktop) are all the same height, but they vary from row to row, I assume depending on the amount of maximum content.
    How would I make them all the same height ?
    Note: The post template block is set to 100% height!

    Dave

  • Ying
    May 7, 2024 at 8:55 am

    Then you need to set a min-height for the parent container of the text, eg. 350px, the value needs to be greater than or equal to the tallest container.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.