[Resolved] How to make every GenerateBlocks Column size

[Pintu]

Hi, how to make all columns the exact same size, currently the column does not have the same length. https://ibb.co/gvpmRgr

Can you share the CSS that will make it happen? Thanks

[Ying]

It’s not possible based on your current HTML structure.

Can you wrap a containerblock outside the author name/avatar and post date?
https://www.screencast.com/t/JgWWoR9eUXQ

Once it’s done, we can offer some CSS to achieve this.

[Pintu]

How do I do that can you please tell me?

[Fernando]

Hi Pintu,

Just add a new Container Block within your Container Block, and drag and drop those Block mentioned by Ying there.

[Pintu]

I did, can you now check?

[Pintu]

Added a new Container Block within the Container Block and did all that mentioned by Ying. Now can you please check and provide the CSS?

[Fernando]

Great. Now try adding this CSS:

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

.blog .dynamic-content-template > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
}

.blog .dynamic-content-template > .gb-container > .gb-inside-container > .gb-container {
    flex-grow: 1;
}

.blog .dynamic-content-template > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog .dynamic-content-template > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container > .gb-button-wrapper {
    margin-top: auto;
}

[Pintu]

Thanks.

But it only applies on the front page, not on the category pages.

[Pintu]

Can you also provide CSS for the category pages? Thanks

[Fernando]

Are you using the same Content Template for all Archive pages as well?

[Pintu]

Yes.

[Fernando]

Try this instead:

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

.dynamic-content-template > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
}

.dynamic-content-template > .gb-container > .gb-inside-container > .gb-container {
    flex-grow: 1;
}

.dynamic-content-template > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dynamic-content-template > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container > .gb-button-wrapper {
    margin-top: auto;
}

[Pintu]

It worked! Thanks a lot 🙂

[Fernando]

You’re welcome Pintu! 🙂

[Pintu]

Hi, Fernando after adding the CSS one of the headings on the homepage not showing properly https://ibb.co/Sx055jX

Please tell me the fix.

[Author]

Posts