[Resolved] Fix Read More Button to bottom right of container

[MMS]

I’ve added a ‘Read More’ button to the bottom right of each post preview of the home page here:- https://makemesustainable.com however I don’t seem to be able to fix it in the bottom right corner of the box it seems to float up and down depending on the length of the excerpt. Also even though I’ve put the excerpt length to 20 characters it seems to vary from preview box to preview box.

[Fernando]

Hi MMS,

For now, you’ll need a custom CSS code to align that button at the bottom.

With that upcoming update that should be out soon, you’ll be able to set it at the bottom through the Block settings.

As for the excerpt, if your Post is using a custom Excerpt, it will override the excerpt length you set and show all the custom excerpt. See: https://docs.generatepress.com/article/excerpt-issues/

[MMS]

Hi, What custom CSS can I use to fix the button until the new feature is rolled out? Thanks

[David]

Hi there,

try adding this CSS:

.align-bottom .gb-query-loop-item .gb-container,
.align-bottom .gb-query-loop-item .gb-container .gb-inside-container {
    display: flex;
    flex-direction: column;
    flex: 1;

}

.align-bottom .gb-query-loop-item .gb-container .gb-button-wrapper {
    margin-top: auto;
}

then select the Query Loop Grid block and give it a class of: align-bottom

[MMS]

Perfect. Many thanks

[David]

You’re welcome

[Author]

Posts