Archived topic
Using Flexbox to align card heights consistently
3 replies · Started by Paul on March 22, 2023
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
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 moreSettings 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;
THANK YOU Ying! :)
I'll give this a try.
Paul
Let me know how it goes :)
