[Support request] help in query loops

[eran]

Hi,
how can i make the buttons stick to the bottom right?
Plus, how can i make the author name in blog page same height as the button?

[David]

Hi there,

add this CSS to your site:

.align-bottom > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.align-bottom > .gb-inside-container > :last-child {
    margin-top: auto;
}

Then edit your Query Loop, select the Container Block ( Post template ) and in Advanced > Additional CSS Class(es) add: align-bottom

you may need to add your Date and Author meta headlines in there own container to keep them inline.

[eran]

It worked but now in my blog the headlines not the same height

[David]

Your blog cards are using a different design and will require a different CSS rule to treat them.
Can you remove the align-bottom class from your blog content template ?

[eran]

Done.
Is it better to make the blog cards from query loops?

[Ying]

Try adding blog-card class to the very outside container of your content template.

Then add this CSS:

.gb-container.blog-card > .gb-inside-container {
    display: flex;
    flex-direction: column;
}
.gb-container.blog-card > .gb-inside-container > *:last-child {
    flex: 1;
}
.gb-container.blog-card > .gb-inside-container > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.gb-container.blog-card > .gb-inside-container > .gb-container > .gb-inside-container > *:last-child {
    margin-top: auto;
}

[Author]

Posts