[Resolved] Last Child Item at Bottom of Loop Tempalte

[Ian]

Had to add an extra container to make this loop template work. Is there an easy way to use custom css to stick the bottom container (date + author) to the bottom of the template? Creds provided below. Thank you kindly!

[Ying]

Hi Ian,

Try this CSS:

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

.gb-container-8ec5a578 >.gb-inside-container >*:last-child {
    margin-top: auto;
}

.gb-container-cc45efc4.gb-container-7bd0c8a0 > .gb-inside-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

[Ian]

Wow Ying, thank you! Is there a way to use “Additional Class” to target various containers so we can run one set of css for all Query Loops on the site?

[Ian]

What do you think of this?

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

.lower-container >.gb-inside-container >*:last-child {
    margin-top: auto;
}

.template-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

[Ying]

Is there a way to use “Additional Class” to target various containers so we can run one set of css for all Query Loops on the site?

It’s not possible, unless you are using the exact same layout for all your query loops.

[Ian]

For consistency, we will be using the same layout for most query loops. I think this works. Did I get this right?

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

.lower-container >.gb-inside-container >*:last-child {
    margin-top: auto;
}

.template-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

[Ying]

That’ll work 🙂

[Ian]

Thank you Ying! Much appreciated.

[Ying]

No problem 🙂

[Author]

Posts