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?
Cards with the same height
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.quickandeasywebbuilder.com/f ... =12&t=1901
MUST READ:
http://www.quickandeasywebbuilder.com/g ... arted.html
Quick 'n Easy Web Builder FAQ
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.quickandeasywebbuilder.com/f ... =12&t=1901
MUST READ:
http://www.quickandeasywebbuilder.com/g ... arted.html
Quick 'n Easy Web Builder FAQ
Re: Cards with the same height
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.
You can use different properties for the flexbox container in breakpoints.
So, instead of row, use column layout for smaller views.
Re: Cards with the same height
Ok, thanks! I will give that a try.
Re: Cards with the same height
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;
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;