[Resolved] Vertical Alignment of Items Within Containers

[Brent Wilson]

In grid of containers with different lengths of text in them, I want to move the bottom elements down to all be the same distance from the bottom. What do I need to do in order to achieve this?

https://paste.pics/235eacc8b48d2a594b769e1ac0bbd83b

[David]

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;
}

[Brent Wilson]

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

[David]

Where did you add the CSS?

[Brent Wilson]

I added it temporarily in the Customizer Additional CSS field.

[David]

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

[Brent Wilson]

Done.

[David]

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

Then the CSS will work on all screen sizes

[Brent Wilson]

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?

[David]

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.

[Brent Wilson]

Thanks David! I appreciate your help on this!

[David]

You’re welcome

[Author]

Posts