Topic: I need help formatting query loops

DataSmasher
September 4, 2024 at 10:20 am

Hello –
Here is a link to my home page. https://www.blueridgebirdwatcher.com/

You will see two sets of query loops on my home page because I need help figuring a few things out.

1) The first set is one I entered manually, the columns have a white background and I cannot figure out how to change that. I have tired the obvious already so those instructions won’t be helpful. I have tested all column components and while I was able to change the background (just for testing) to RED it only showed up at the bottom of the column.

2) The second set is one from your pattern library, I chose it because it has a clear background. The only issue with this is I would like to understand how to make the columns the same height and control the placement of the content inside the columns. Headers to the top, author details to the bottom etc. any formatting that allows it to look better aligned.

We are trying to launch this new site this week and I would greatly appreciate your help.

Thank you
Dona
Alvind
September 4, 2024 at 7:03 pm

Hi there,

1) I inspected the layout and noticed that there are three Query Loop blocks, each inside its own column. Was this intentional? It seems off because, typically, you’d want a single Query Loop to dynamically output all three columns, rather than separate loops for each.

2) We have an article that explains how to set up the layout exactly like that:
https://docs.generateblocks.com/article/equal-height-grid-containers/
DataSmasher
September 5, 2024 at 1:14 am

Hi Alvind,

1) I noticed that difference between my query loop and your template but I have no idea how to actually set that up. I learned how to do the query loop from Chat GPT ;). I think my prompt explained that I wanted it to show the last 3 posts and maybe that’s how I got there.

Can you explain how my method would prevent me from changing the background color? Also do you have an article on setting up query loops correctly?
Thank you
DataSmasher
September 5, 2024 at 1:32 am

For point # 2)

I have following your link to the instructions, when I select the grid holding the query loop I do not have them same edit choices described in the instructions. See screen shot. What am I doing wrong?
https://icecream.me/2924cc389c179645fb1bf66d40375984
Tom
September 5, 2024 at 11:59 am
Hi there,

I think it will be easier to provide a little CSS to achieve pushing the footer of those query loop items to the bottom of their containers so they all match.

1. In the Grid block (the one you have selected in the above screenshot), go to the “Advanced” section and add a custom class to this specific loop. Something like: equal-height-query-items

2. Add this CSS:
```
.equal-height-query-items .gb-grid-column > .gb-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.equal-height-query-items .gb-grid-column > .gb-container > .gbp-card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.equal-height-query-items .gb-grid-column > .gb-container > .gbp-card > .gb-container:last-child {
    margin-top: auto;
}
```
Adding CSS: https://docs.generatepress.com/article/adding-css/

This should push the footer to the bottom of each column so they all align.

The method the second Query Loop uses is the best, as you’re only running a single query that is outputting each post in a column.

Hope this helps!
DataSmasher
September 5, 2024 at 12:26 pm

This worked great. I would love to understand though why something like this isn’t just a standard setting vs. custom CSS. My journey away from website builders like Elementor, Beaver, WPBakery, DIVI (I’ve used them all) is just two weeks old and I find myself being surprised by the complicated things are accomplished with one click contrasted by what feels like a simple thing requiring special code. Is there any advice, help you can give to force an undertanding into my brain?? :).

Thank you Thank you for the help on this matter!
Dona
Tom
September 6, 2024 at 9:21 am

You could technically achieve this inside of the block settings, but it’s much more difficult to direct you to the right blocks to set these settings within a support context.

If you were using GenerateBlocks Pro along with Global Styles, I would tell you to:

1. Create a Global Style for: .equal-height-query-items
2. Inside that Global Style, set the selectors: https://docs.generateblocks.com/article/style-selectors/

For example, .gb-grid-column > .gb-container would be a selector under this Global Style.

Then, within that selector, you would use the styling controls to set the values for the properties we’ve used in the CSS.

You’d then repeat that for the other selectors.

This would prevent you from having to add manual CSS, and it would apply the CSS in the editor as well as the frontend for better previewing.

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

I need help formatting query loops