[Resolved] Post grid not same height

[iamarghya]

So I have created this page with your content template but If you load more blogs you can find that not all the post boxes or containers are of the same height, I tried to use grid-template-rows but no help, (you need to load more posts to find the incorrect boxes.)

[Fernando]

Hi there,

You can try adding this CSS in Appearance > Customize > Additional CSS to make the height of the articles similar:

.gb-container.blogbox {
    height: 100%;
}

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

Then, if you would like to push down the “Read more” button, a CSS code like this might help:

.gb-container.gb-container-2bf90e36 {
    flex-grow: 2;
}

.gb-container.gb-container-2bf90e36 > * {
    height: 100%;
}

.gb-container.gb-container-2bf90e36 > * > * {
    height: 100%;
}

.gb-container.gb-container-2bf90e36 > * > * > * {
    height: 100%;
}

.gb-container.gb-container-2bf90e36 > * > * > * > * {
    height: 100%;
}

.gb-container.gb-container-2bf90e36 > * > * > * > * > * {
    height: 100%;
}

.gb-container.gb-container-2bf90e36 > * > * > * > * > * > .dynamic-entry-excerpt {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

p.read-more-container a {
    margin-bottom: 10px;
}

There’s some extra Blocks which may not be needed in your structure. Specifically, I can see that the Dynamic Excerpt Block is place within another Grid Block and another Container Block. If you have no need for these Blocks, you may remove these and that would lessen the CSS code needed to make the “Read more” button go down.

Hope this helps! Kindly let us know how it goes. 🙂

[iamarghya]

Yes, I removed those blocks I was experimenting with some dynamic images.
Btw I put your first CSS and all the box are in the same height Thank you, but the read more button is not synced that CSS later you provided is not doing that work.

[iamarghya]

And is there any more option I can create a button that links me to the post, not the built-in read more button, I am talking about making one with a button block?

[Fernando]

The CSS to move the Read more block only works for your previous structure. Now that you’ve removed the other Blocks, you can try this CSS instead to move the Read more button down:

.gb-container.blogbox .gb-container-2bf90e36 {
    flex-grow:1;
}

.gb-container.blogbox .gb-container-2bf90e36 .gb-inside-container{
    height: 100%;
}

.gb-container.blogbox .gb-container-2bf90e36 .dynamic-entry-excerpt {
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

With regards to creating a custom read more button that directs to the post, yes, this is possible. You would just need to add dynamic link type – single post to the block.

Hope this clarifies. 🙂

[iamarghya]

Yep, the CSS worked thanks, and I got that custom button understood. Many more questions will be coming up as I am designing the website from scratch, Bear with me… Thanks, again

[Fernando]

You’re welcome! Looking forward to help you once you’ve finished your layout. 🙂

[Author]

Posts