Archived topic
Equal column heights question
11 replies · Started by George on September 30, 2022
I need to apply equal column heights to the particular blog layout attached. Can you help?
Hi George,
Try this CSS:
.one-container.blog .dynamic-content-template >.inside-article > .gb-container, .one-container.blog .dynamic-content-template >.inside-article > .gb-container >.gb-inside-container {
height: 100%;
}
You may set the white background color to the parent GB container.
Thanks Ying, it worked. How can I set the buttons to bottom-align?
Did you remove the site link? Can you attach it again?
Let me know :)
Ah sorry, didn't notice. Re-attached the link.
Try this:
.dynamic-content-template .gb-grid-wrapper>.gb-grid-column>.gb-container:not(.gb-has-dynamic-bg) >.gb-inside-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dynamic-content-template .gb-grid-wrapper {
height: 100%;
}
Thanks, Ying, it doesn't seem to be working.
Try adding this:
.blog .dynamic-content-template > .inside-article > .gb-container {
height:100%;
}
It doesn't work. Here is what I have now:
.dynamic-content-template .gb-grid-wrapper>.gb-grid-column>.gb-container:not(.gb-has-dynamic-bg) >.gb-inside-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dynamic-content-template .gb-grid-wrapper {
height: 100%;
}
.blog .dynamic-content-template > .inside-article > .gb-container > .gb-grid-wrapper {
height:100%;
}
Reminder: I want equal heights and bottom-aligned buttons.
I don't see any updated CSS on your site, maybe still cached.
These are the CSS I use and it seems working fine:
https://www.screencast.com/t/xPFCpxJNW
.one-container.blog .dynamic-content-template >.inside-article > .gb-container, .one-container.blog .dynamic-content-template >.inside-article > .gb-container >.gb-inside-container {
height: 100%;
}
.dynamic-content-template .gb-grid-wrapper>.gb-grid-column>.gb-container:not(.gb-has-dynamic-bg) >.gb-inside-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dynamic-content-template .gb-grid-wrapper {
height: 100%;
}
.gb-grid-column-b2462283 {
max-height: 250px;
}
.gb-grid-wrapper>.gb-grid-column-e0fef27e {
flex: 1;
}
.dynamic-content-template .gb-grid-wrapper {
flex-direction: column;
}
Yeah, that works Ying, thanks!
No problem :)