Archived topic
Alignment issue blocks with GP and generateblocks
11 replies · Started by Rohan Verma on December 11, 2022
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
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;
}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.
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.
Thank you Ying and Fernando, the solutions worked great. We will be waiting for the next generateblock update.
You're welcome, Rohan!
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.
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.
Already under single GB Container: https://tinyurl.com/2fahe3ud
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.
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;
}
I see. Glad you got it working!
