CMS collection items wrapping

Hi all,

I have a CMS collection of text blocks and want to display them continous text, i.e. text inside each block is wrapped and blocks wrap.
I get them to wrap if two subsequent blocks are both 1-liners and short enough to fit into the same line. (See text blocks 3 and 4 in example).
But how to get one block wrap after the last (short) line of the first block? (See eg. text blocks 1 and 2 in example).
Many thanks,
Ulrich


Here is my public share link:
psl

Yes, you can do that; however because you’re storing your items in discrete CMS records, you’ll have a bit more custom CSS work to do to deal with the wrappers.

Give your Collection List a custom class, like My Collection. Then add this CSS into a Code Embed;

<style>
.my-collection .w-dyn-items,
.my-collection .w-dyn-items .w-dyn-item,
.my-collection .w-dyn-items .w-dyn-item p {
	display: inline;
}
</style>

Here’s a demo.

1 Like

Hi @memetican, do you own sygnal.com . I need a solution that lives here but the site is currently down.

1 Like

Brilliant! Thanks very much, @memetican!

1 Like

Yes. whoa, thanks for that- Webflow unpublished my site for some reason. That’s crazy.

@memetican it is back up, Thank you so much

1 Like

I’ve been trying to load a collection list from another collection template page to nest into a collection list on one page but the embed gets called as many times as I have items in the parent collection list.

This is my code

$(`#1.nested-cl-wrapper`).load(`/brands/slug .splide__track`)

@memetican you are life saver. Got it to work using your method

1 Like

This code fix has been super helpful. I’m running into an issue where my collection has 300+ items, but only about a third of the list is showing.

Is there a way to make the collection list have no limit on the items showing?

Not on a single collection list.

Look into Finsweet’s CMS Load to resolve that, it’s the easiest and cleanest way.

However that many items will be difficult for the user to navigate, so you’ll likely also need to setup Finsweet’s CMS Filter.