[Support request] align button in loop-template

[Stefanie]

Hi there,

for the blog i have created a loop-template.
The cards should show the featured image and underneath the title and excerpt.

Because i need a fallback image, i did not choose a GB-image for the featured image, but a GB-Container with background image.

The problem now is that i want to align the buttons in the query-loop at the bottom.
For this to work, I have to change the surrounding container to flex.

But as soon as I do that, the background image of the image container disappears.

This is the query-loop with setting set to “Standard”
All the Containers with bg-images are displayed.

This is the query-loop with setting set to “Flex”
The Buttons are aligned correctly, but all the bg-images are gone.

[Leo]

Hi there,

I don’t believe you need to change the display setting for the container.

Can you follow the instruction here to create equal height grid containers?

Then add auto to the top margin of the button that links to the single posts:
https://docs.generateblocks.com/article/spacing-options-overview/#margin

Let me know 🙂

[Stefanie]

Hi Leo,

thank you very much for the quick response!

Can you follow the instruction here to create euqla height grid containers?

I suppose you have forgotten to set the link to the instruction…

What I learned is this (in order to align buttons in a grid):
1. Set the Grid-Container to Flex
2. Make sure, that the height of the Container is 100%
3. Set the margin-top of the Button to auto

but perhaps there are many ways

[Leo]

I suppose you have forgotten to set the link to the instruction…

My bad haha:
https://docs.generateblocks.com/article/equal-height-grid-containers/

What I learned is this (in order to align buttons in a grid):
1. Set the Grid-Container to Flex
2. Make sure, that the height of the Container is 100%
3. Set the margin-top of the Button to auto

That is exactly what you have to do. Good job!

[Stefanie]

Hi Leo,

That is exactly what you have to do.

But that is exactly what triggers the problem, as I have already described above.
I want to align the buttons all to one line (bottom).

As I described above, this is how I do it:
For this to work, I have to change the surrounding container to flex.
But exactly at that moment my containers with the background images disappear.

This is the display: standard:
https://prnt.sc/8yziMSlpZEhI
All the Containers with bg-images are displayed, but the buttons are not aligned.

This is display: flex
https://prnt.sc/HU19_MIiAnaP
All the buttons are aligned, but now the images are gone!

What to do?

[Fernando]

Hi Stefanie,

Try giving the Container Block that holds the image a min-height or height value.

Let us know how it goes.

[Stefanie]

Hi Fernando,

unfortunately i can’t do that, because i need the images in a very specific aspect ratio.
So i gave the image container a css class:
Screenshot

The images get their size through this css:

.aspect-ratio-16-10 {
	aspect-ratio: 16/10;
}

in such a case, is it not possible to align the buttons at the bottom?

[David]

Hi there,

1. Select your container block with the background image, and give it a width of 100%.
This will ensure it does not collapse on the next step.

2. now select the Post Template container, and in Layout set the Display to Flex, Flex Direction to Column

All the other things you did should now work.

[Stefanie]

Hi David,

All the other things you did should now work.

YES, now it works 🙂

Thank you!!

[David]

You’re welcome

[Author]

Posts