-
Hello,
I want to force my grid containers in the FAQs element to have equal height. All containers should match the height of the largest container. I’ve tried using the solution in this topic: https://generatepress.com/forums/topic/equal-height-grid-containers/, but it didn’t work for me. Did I do something wrong? Please see the screenshots for reference.
-
Hi there,
what Page can I see the issue ?Ok, so the FAQ element
I made the following changes
1. I selected ALL the grid column Container blocks and set their Spacing > Min Height to
100%
2. The grid block I added a Vertical Gap to. -
Thank you! Is this the best workaround? Is it not possible to set all grid column containers to equal height? So for example, if the highest column container is 300px, then all containers in this box will have a height of 300px?
-
It’s not a workaround.
It’s the way to make the columns equal height and keep them responsive.
Responsiveness; consider on screen resize, text inside the grid items may reflow at different rates leading to changes in height. This method ensures that all columns in a row maintain the same height.If you need a more specific height then in addition to setting the Sizing > Height to 100%, set a Minimum Height eg. 300px
-
Perfect, thank you!
-
You’re welcome!
-
Hello,
I have a similar problem on another website. On the blog archive page, I’m using a Block – Content Template element. For some reason, when resizing to tablet size, the featured image isn’t scaling to 100% height. I’ve applied the solution you sent me earlier, but it didn’t work. Could you have a look? See the screenshot for reference.
-
Hi there,
You need to add this CSS:
@media (min-width: 768px) and (max-width: 1024px) { .gb-container-e0989e09 > figure { height: 100%; } } -
Problem solved! Thank you.
-
You’re welcome
- You must be logged in to reply to this topic.