[Support request] Using Flexbox to align card heights consistently

[Paul]

Hi There,

I’ve been trying to update the cards used on blog category pages to Flexbox so that I will align to the same height in each row no matter the amount of content.

Although I can’t get it to work 😕 Any ideas on what I’m doing wrong (link in private info)?

I set flex on the container that wraps the image and content of each card – perhaps is should be on the second container that holds the title and button?

Cheers

[Ying]

Hi Paul,

Based on your design, I would create a different structure, please refer to the screenshot below:
https://www.screencast.com/t/2IWj36yCu

- Container A
  - Container B: background image set to featured image
     - Headline: list of terms
  - Container C: 
     - Headline: title
     - Headline: excerpt
     - Button: read more

Settings for Container A:
– height:100%;
– display: flex;
– flex-direction: column;

Settings for Container B:
– min-height: 250px;
– enable dynamic background image, set it to featured image;

Settings for Container C:
– display: flex;
– flex-direction: column;
– justify-content: space-between;
– flex-grow: 1;

Settings for the Button in Container C:
– margin-top: auto;

[Paul]

THANK YOU Ying! 🙂

I’ll give this a try.

Paul

[Ying]

Let me know how it goes 🙂

[Author]

Posts