Site logo

Archived topic

Equal column heights question

11 replies · Started by George on September 30, 2022

Viewing posts 1–12 of 12

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 :)

This archived topic is closed to new replies.