Hi, in the past I used flex to give the grid equal heights for images, titles, text and buttons but with the latest update this doesn't work anymore. I now used this css properties to achieve this:
.tb-grid-column>.wpv-block-loop-item>.tb-container {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: flex-end;
flex-wrap: wrap;
align-content: flex-start;
}
But now there is a large gap on top of some images on the archive page due to the different image sizes used (logo's).
Can you help me to get this fixed?
Best regards,
Nick
Hello and thank you for contacting the Toolset support.
Maybe using justify-content: flex-start; could help with the images, but it will create a gap after the buttons. This happens because some titles are larger than others and take roughly two lines.
.tb-grid-column>.wpv-block-loop-item>.tb-container {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-wrap: wrap;
align-content: flex-start;
}
Maybe you want to set a min-height for the title block, or wrap it inside a container block and assign a min-height to it. The min-height should be higher or equal to the height of two lines.
I hope this helps. Let me know if you have any questions.
Hi Jamal,
Thanks for your quick response. I solved it by reducing the height of the images. After giving the images a fixed height, the "flex-end" worked fine.
Best regards and have a nice weekend!
Nick
