[Resolved] Equal column heights question

[George]

I need to apply equal column heights to the particular blog layout attached. Can you help?

[Ying]

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.

[George]

Thanks Ying, it worked. How can I set the buttons to bottom-align?

[Ying]

Did you remove the site link? Can you attach it again?

Let me know 🙂

[George]

Ah sorry, didn’t notice. Re-attached the link.

[Ying]

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%;
}

[George]

Thanks, Ying, it doesn’t seem to be working.

[Fernando]

Try adding this:

.blog .dynamic-content-template > .inside-article > .gb-container {
    height:100%;
}

[George]

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.

[Ying]

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;
}

[George]

Yeah, that works Ying, thanks!

[Ying]

No problem 🙂

[Author]

Posts