Vertical Alignment of Items Within Containers

Hi there,

try the following CSS:

.gb-query-loop-item .gb-container {
    height: 100%;
}
.gb-query-loop-item .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.gb-query-loop-item .gb-inside-container .gb-inside-container :last-child {
    margin-top: auto;
}

That CSS doesn't seem to be working for me. Any other ideas?

Where did you add the CSS?

I added it temporarily in the Customizer Additional CSS field.

Can you add it back in there, and clear any caches, and then let me know so i can see whats going on .

Done.

Ok, so the CSS before it is inside a media query and its missing a closing } bracket
Add that bracket in:

https://www.screencast.com/t/rFdRrKhMiS

Then the CSS will work on all screen sizes

Ooops. Thanks for catching that. It appears to be working now.

It appears that this CSS is pretty general (no IDs, etc.). So theoretically, this should work on GB query loops on other pages as I add them, right?

Yeah it will work on any of the gb-query-loop-item containers that use the same layout ie. One where you have Container nested within a container. And its that nested container that needs its last child aligning.

Thanks David! I appreciate your help on this!

You're welcome