Is there a way to create columns in the CMS rich text element? Like a magazine?
I don’t see this often, but there are several ways to make a columnated layout work automatically.
Here’s a demo using CSS3-
https://nested-lists-richtext.webflow.io/columns
Click on the top right corner to see how I’ve implemented it in the Webflow designer.
The gray panel above the columns is HTML Embed containing the CSS, shown here.
<style>
#columns {
-moz-column-count: 3;
-moz-column-gap: 2em;
-moz-column-rule: 1px dashed #aaa;
-webkit-column-count: 3;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px dashed #aaa;
}
</style>
Just add that to your page, and give your Rich Text Element an ID of columns
Note that you’ll have to test it on the browsers you want to support, even after a decade support is incomplete.
Which might bring you to option 2, a jQuery approach;
https://adamwulf.me/columnizer-jquery-plugin/
2 Likes
Thanks this worked for me and allowed me to learn more how to use custom embeds to modify styles on elements within the page.
1 Like
Hey this worked really well, but im noticing my list isn’t flowing into the next column. It’s all still in one column. Is there anything I am doing wrong?
It wont flow into the next column. Maybe a column-height? I tried moz-column-width and the webkit equivalent, wasn’t effective.
Hey Peter, I’d need to see a published site link and readonly project link.
Hey Michael, thanks for getting back to me so quick.
and here is the published link:
This problem of the text not flowing into the next column has been driving me crazy for the last hour. I’ve tried setting fixed heights to the element, widths, floats and clears, breaking spaces, nothing seems to have an effect. I would just like half the bullets to move into column 2, that’s it.
As you can see, this is using a Rich Text Element with dynamic content pulling from the CMS.
The problem is the overflow: hidden setting on the list itself.
I’d unlink the richtext, find a list, style it with overflow visible within that RTB, and then relink it.
Ohhh okay, I’ll try that! Thank you so much for your prompt responses. Big deadline tomorrow and getting stuck on a detail like this is a huuuge time sink. You are THE MAN!
I’ll let you know how that goes!
1 Like
Hi Michael,
It doesn’t work. I even tried adding “overflow: visible” to the html embed. It seems that whenever I link the RTB back to the dynamic content, it overwrites whatever settings I made. When I unlink again, I go and look at the lists in the RTB and they have been reset to overflow: hidden, yet again.
