Alignment issue blocks with GP and generateblocks

This topic has 11 replies, 3 voices, and was last updated 3 years, 4 months ago by Fernando.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
December 11, 2022 at 3:56 am #2457668

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

December 11, 2022 at 3:15 pm #2458263
Ying
Staff
Customer Support
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;
}
```
December 11, 2022 at 11:00 pm #2458468

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.

December 11, 2022 at 11:25 pm #2458491
Fernando
Customer Support
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.
December 12, 2022 at 12:07 am #2458517

Rohan Verma

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

December 12, 2022 at 12:08 am #2458518

Fernando
Customer Support

You’re welcome, Rohan!

December 12, 2022 at 1:09 am #2458569

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.

December 12, 2022 at 1:18 am #2458576

Fernando
Customer Support

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.

December 12, 2022 at 1:55 am #2458614

Rohan Verma

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

December 12, 2022 at 2:03 am #2458623
Fernando
Customer Support
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.
December 12, 2022 at 2:29 am #2458653

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

December 12, 2022 at 5:08 pm #2459720

Fernando
Customer Support

I see. Glad you got it working!
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

[Resolved] Alignment issue blocks with GP and generateblocks

Popular Articles

[Resolved] Alignment issue blocks with GP and generateblocks

Popular Articles

Start building better websites today.