Query Loop

Hi Sebastian,

Can you first add a class to the class list of the Grid Block inside the Query Loop Block?

Then, set the Background color and the border radius to the Container Block holding the Image and the child container Block instead.

We'll then go from there.

Sorry, but why do I need background color for this`And border radius?

You're current Loop has an Off-white/gray background and some border-radius. See: https://share.getcloudapp.com/bLu5qQ2Q

It's added through the child Container Block. Try adding it to the Parent Container so when we fix it, the background color reaches the bottom.

Ah, ok. I understand. Fixed it :)

What's next?

Try adding this CSS in Appearance > Customize > Additional CSS:

.gb-grid-wrapper.gb-grid-wrapper-2c3810fb.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.gb-grid-wrapper-2c3810fb.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > .gb-container {
    flex-grow: 1;
}

.gb-grid-wrapper.gb-grid-wrapper-2c3810fb.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gb-grid-wrapper.gb-grid-wrapper-2c3810fb.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container > .gb-button-wrapper {
    margin-top: auto;
}

Looks awesome!

One little problem: I want to show 6 entries. Now there is no space between the first and second line...

There should be Gap settings in the Grid Block Settings within the Query Loop. Can you try that?

Example: https://share.getcloudapp.com/p9uQkoRX

Thank you very much! Once again you have helped perfectly. I am happy as can be :)

You're welcome Sebastian! :)