Icon Box: same height on the same row
Hi,
I have a wrap of 3 Icon Box in the same row.
I want that the Icon Box stretches if one item has more text.
See here in the documentation example, I want the first block to be same height as the second one.
I tried messing with the spacing options on my Wrap but no luck.
Comments
I managed to get it working with custom CSS
Hi,
I am happy to see that you handled it.
Is there anything else I can help you with?
Best regards
Hello,
I'm facing the same issue. Could you please tell me how you fixed it? Thank you
No but it would be nice if this was added directly in BeBuilder as an option
I added a custom class to the wrapper around the Icon boxes ("grid-wrapper" class) then added this custom CSS:
.grid-wrapper .mcb-wrap-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
column-gap: 30px;
row-gap: 23px;
}
.grid-wrapper .mcb-wrap-inner .column {
width: 100% !important;
}
.grid-wrapper .mfn-icon-box {
height: 100%;
}
.grid-wrapper .mfn-icon-box .desc-wrapper {
align-content: flex-start;
}
.grid-wrapper .mcb-column-inner {
margin: 0 !important;
height: 100%;
}