Cards with the same height

All Quick 'n Easy Web Builder support issues that are not covered in the forums below.
Post Reply
Ton
Posts: 34
Joined: Thu Jun 13, 2019 8:33 am

Cards with the same height

Post by Ton »

Hi, I have a layout grid with 3 columns. Each column has a card with text and an small image. The cards have a border.
It works well and responsive, if the screen gets smaller then the breakpoint, the cards will appear under each other instead of next to each other.
But it doesn’t look that great because the cards don’t have the same height. I have read that this can be fixed by using a Flexbox container.
And indeed, if you set ‘align items’ to 'stretch' the cards all have the same height. But when the screen gets smaller, they don’t wrap under each other, but become very small. Is there a way to fix this?
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Cards with the same height

Post by Pablo »

Equal heights are not possible with Layout Grids (this is a CSS limitation) , but it is possible with a flexbox container.
You can use different properties for the flexbox container in breakpoints.
So, instead of row, use column layout for smaller views.
Ton
Posts: 34
Joined: Thu Jun 13, 2019 8:33 am

Re: Cards with the same height

Post by Ton »

Ok, thanks! I will give that a try.
Ton
Posts: 34
Joined: Thu Jun 13, 2019 8:33 am

Re: Cards with the same height

Post by Ton »

Using a breakpoint caused other issues, so I did not use the breakpoint.
But the 3 cards in the flexbox container look much better with all the same height.
The problem that the cards became too small and narrow is now fixed by setting the width in custom style: min-width: 230px;
Post Reply