Streaming live at 10am (PST)

How to center multi reference items?

I’ve set up a blog post collection with a multi reference to author(s). Some blogs have 1 author, some blogs have multiple authors.

This is a blog with 2 authors:

with the 2 column settings:

But blogs that only have 1 author, it shows up like this:

I’ve tried to set the settings to Full width and it works well with 1 author, but then the 2 authors would just stack on top of each other, something I don’t want.

I’ve tried using custom code to hide the empty divs but it still the blogs with 1 author are still not centering. I’ve also tried to make the dynamic list items inline-blocks (instructions from here: How to center a dynamic list) but the inline-block setting is grayed out.

here is the preview link, the section is located in the Blogs Template:

Hi @mrhedgie, thanks for the question. Two things I would suggest, update the “authors” class to have flex styling with direction column and center the content.

Also, on the tiny image of the one author, the reason is that the width on the author pic is set to 25% max, and the one image of the author that is tiny, has a larger image size than the other two pics, which causes this image to shrink more than the others, when the 25% is applied. Make all author profile pics the same original size, and the issue with that should go away :slightly_smiling:

I made a video, I hope it helps:

1 Like

Thank you so much @cyberdave! That solved my problem. I am also really really impressed your effort to even make a video for me!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.