[Resolved] Sidebar widget image and heading text alignment

[Rachel]

Hi there,

I am updating my wp-show-post sidebar widget to a Generateblocks query block and I am having trouble aligning the image and heading text on the same row. I previously managed this with custom css in the customizer. You can see the issue in the recent posts section of the sidebar in the link provided.

Can you advise how I can force them to display on one row?

Thanks,
Rachel

[Fernando]

Hi Rachel,

Try placing the Image and the Container Block inside a Grid Block.

Then set the Container width of the columns accordingly for all views.

That should place them in one row.

[Rachel]

Hmm, the query loop is already set in a container/grid, and the post template is set to 100% width? I didn’t want columns for each parameter, as it is in the sidebar.

[Fernando]

The Grid Block within the Query Loop Block is for the articles/posts not the content within it.

If you prefer, we can also use custom CSS to force it to look the way you prefer. Try adding my-query to the class list of Grid Block of the Query Loop Block, then add this css.

Example:

.my-query .gb-container> .gb-inside-container {
    display: flex;
}

.my-query .gb-container > .gb-inside-container > figure {
    width: 20%;
}

.my-query .gb-container> .gb-inside-container > h4 {
    width: 70%
}

You can alter the values to your preference.

Hope this helps!

[Rachel]

Thanks, the css works. I tried to work out how to place the query loop content into another grid, but couldn’t work it out – as all the query content seems to need to stay together? Is there something I am missing?

[Fernando]

I see.

Here’s a sample structure for reference: https://share.getcloudapp.com/mXux4ZoQ

Hope this helps!

[Rachel]

Yes, thanks, but when I tried to recreate it myself it broke the query loop when I tried to add those blocks to the structure. I will need to play around more to get it to work using that method – just not quick and easy.. thanks for your help.

[Fernando]

You’re welcome Rachel! We don’t usually do this, but I tried making a short screen recording to show you how to do it. See: https://share.getcloudapp.com/6quzpRvv

Hope this helps!

[Rachel]

Thank you so much – that is really helpful – it is the process flow which is hard to work out at first with this. Thanks again.

[Fernando]

You’re welcome Rachel! Glad to be of assistance!

[Author]

Posts