Query Loop – GeneratePress

This topic has 9 replies, 2 voices, and was last updated 3 years, 7 months ago by Fernando.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
September 27, 2022 at 6:37 am #2355212

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 🙂

September 27, 2022 at 7:38 pm #2355870

Fernando
Customer Support

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.

September 27, 2022 at 8:39 pm #2355906

Sebastian

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

September 27, 2022 at 11:34 pm #2355983

Fernando
Customer Support

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.

September 28, 2022 at 12:12 am #2356015

Sebastian

Ah, ok. I understand. Fixed it 🙂

What’s next?

September 28, 2022 at 12:41 am #2356042
Fernando
Customer Support
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;
}
```
September 28, 2022 at 1:04 am #2356069

Sebastian

Looks awesome!

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

September 28, 2022 at 1:14 am #2356079

Fernando
Customer Support

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

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

September 28, 2022 at 1:30 am #2356095

Sebastian

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

September 28, 2022 at 5:00 pm #2356995

Fernando
Customer Support

You’re welcome Sebastian! 🙂
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

[Resolved] Query Loop

Popular Articles

[Resolved] Query Loop

Popular Articles

Start building better websites today.