Looper Consumer - Limit multiple posts to a single Col?

[lorax]

I’d like to get 3 posts to stack vertically within a column using the looper consumer. Not having much luck containing them - they flow out and onto the next row. I’ve set the max width on the column. I tried applying Flexbox with direction set to vertical. Nothing seems to work. Thoughts?

[marc_a]

Hi @lorax,

Thanks for reaching out!

If you want to stack 3 posts vertically within the column, you just need to set the column to full width.

Hope that helps.

[lorax]

Thanks for the reply @marc_a. Yes, on a single column - that I can do. But what about on the row with 2 columns before the dynamic content? See the column with 3 titles squished together on the right …!

screenshot-northlandedu.wpengine.com-2021.10.21-14_29_24|690x340

[marc_a]

Hi @lorax,

To fix your issue, we need to set the max-width of your 3rd column to 100%. Please do as follow. In your sidebar column, please add this CSS code in your edit element CSS.

$el {
  max-width: 100% !important;
} 

Then you should set the looper consumer in your text element and you will have a stack of vertical posts.

Hope that helps.

[lorax]

Getting much closer - thank you. The only issue left is that the example you used is actually two different Post Titles. I want to end up with the Post Title, Post Excerpt, and publish date. When I try to add these elements the don’t stack in the proper order. I get the titles first in a group. Then the excerpts in a group below that. Feels like I need to add a container and apply the looper consumer to that so they will repeat in the proper order?

[lorax]

Oh! Wait - that’s what you meant when you said use a Text element. This way I can place dynamic content within it and get the outputs to stack in the right order. Duh.

[ruenel]

Hey Gregg,

It is good to know that you have figured out a way to resolve the issue. If there is anything else we can help you with, please do not hesitate to open another thread.

Cheers.