[Resolved] Query Loop

[Sebastian]

I have two concerns.

Please have a look at the homepage of my website (link below). There is a query loop at the bottom showing the latest blog posts.

I would like:

1. that all boxes have the same height
2. that the hyperlinks in the boxes are not underlined

How can I do this?

Thanks 🙂

[Fernando]

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.

[Sebastian]

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

[Fernando]

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.

[Sebastian]

Ah, ok. I understand. Fixed it 🙂

What’s next?

[Fernando]

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

[Sebastian]

Looks awesome!

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

[Fernando]

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

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

[Sebastian]

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

[Fernando]

You’re welcome Sebastian! 🙂

[Author]

Posts