[Resolved] Alignment issue blocks with GP and generateblocks

[Rohan Verma]

Hello i have been using GP premium and GB pro for last few years. I have made a homepage using the Query loop block. But the main issue is some texts are not aligned properly. I am currenly showing 3 post per raw (grid view). Meta portion of the posts blocks are not aligning. Here is a screenshot: https://tinyurl.com/2jxexglx. And on archive the blocks are not of same size as well.

Please help me. Thanks

[Ying]

Hi there,

Try this CSS:

.home .gb-query-loop-item > .gb-container >.gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home .gb-query-loop-item > .gb-container >.gb-inside-container > *:last-child {
    margin-top: auto;
}

[Rohan Verma]

Thanks that worked pretty well. Now same thing I need for the archive as well which I have set with generateblock. I have attached the link inn the private box.

[Fernando]

Hi Rohan,

You can try adding this custom CSS as well:

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

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

.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper .gb-container .gb-inside-container > *:last-child {
    margin-top: auto;
}

In the upcoming update of GenerateBlocks, you’ll likely be able to do this with no custom code needed.

[Rohan Verma]

Thank you Ying and Fernando, the solutions worked great. We will be waiting for the next generateblock update.

[Fernando]

You’re welcome, Rohan!

[Rohan Verma]

Hello I made some changes to the block. Now Fernando your css is not working. On homepage everything seems allign but on archive metas are not allign properly in the grid. can you check.

[Fernando]

I see. Place the Author and the Date Blocks inside one GB Container first if you want them in the same line. We’ll alter the code afterward.

[Rohan Verma]

Already under single GB Container: https://tinyurl.com/2fahe3ud

[Fernando]

Alright. Can you try this code instead?:

.archive .dynamic-content-template .inside-article > .gb-container, 
.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container, 
.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper, 
.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper > .gb-grid-column > .gb-container, 
.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
}

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

.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > *:last-of-type {
    margin-top: auto;
}

Let us know how it goes.

[Rohan Verma]

Hello Fernando this worked for us “*:last-child” inplace of “*:last-of-type”

.archive .dynamic-content-template .inside-article > .gb-container,
.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container,
.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper,
.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper > .gb-grid-column > .gb-container,
.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper > .gb-grid-column > .gb-container > .gb-inside-container {
height: 100%;
}

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

.archive .dynamic-content-template .inside-article > .gb-container > .gb-inside-container > .gb-grid-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > *:last-child {
margin-top: auto;
}

[Fernando]

I see. Glad you got it working!

[Author]

Posts