[Resolved] Category Terms display issue in Query Loop GP block

[VR]

Hello,

We are having an issuing getting the Category Terms in a Query Loop GP block to right-align when the terms wrap to a new line. Our best guess is it’s a flexbox issue where the <span> tag containing the terms is auto-expanding to fill the entire width of the flexbox container.

To see this in action, please visit the URL provided in the Private Info box below. Scroll down to the “Latest News” section, and look at the Category Terms displaying on the bottom of the 3rd/right-most post.

How can we adjust the Flexbox CSS so that the Category Terms <span> tag will *only* have the width of the contained content? Once that’s done, the terms that wrap to a second line should still appear right-aligned below the Post’s excerpt.

Thanks for your help!

[Fernando]

Hi Vico,

I see what you mean.

Try placing the Block inside a Container Block. Then add a class to the Container Block.

The container Block should be aligned right, and it shouldn’t be display:flex

[VR]

Thanks. Issue is resolved. While putting the block inside another Container Block didn’t seem to help, your suggestion to right-align and replace display:flex with something else worked.

Here’s the CSS we applied to the categories tag, <h6>, that solved it:

.gb-query-loop-item h6 {
  display: inline-block; /* replace flex */
  float: right;
}

Thanks!

[Fernando]

You’re welcome Vico Rock!

[Author]

Posts