Styling text links in rich text block for CMS

You have set display block on all list items, same as the flex issue mentioned above.

temp

Thank you, @samliew!!!

@jmw, thank you so much for explaining this further. It’s starting to make sense to me. Woohoo!

I do have one more question. In the blog project I’m working on, because of time constraints for the time being, all blog posts (which are dynamically generated) take their formatting from one template and the majority of their content from a rich text element in the collection page, Articles Template. I can set that rich text element inside a container, div or section and set it’s margins & padding to match the layout I’d like, as you suggest is best practice. However, for specific elements that are periodically part of blog post content, such as block quotes and bulleted lists, whose padding/margin I’d like to be greater than the rest of the body content, my thinking is that setting a separate container for these doesn’t make sense as these elements will need to be in the body of the blog post and vary in location within each post.

My question: As I can’t add containers, divs or sections to a rich text element, is the workaround to just set the margin/padding on block quotes and bulleted lists within the RTE? Or is there a better way?

Thanks, again for your help here! Greatly appreciated.

No problem, @Holly! Glad it’s starting to make sense now.

And yes, you’re absolutely right that certain typographic elements (esp block quotes and lists) require their own margin and padding settings within the rich text block. Layout elements should be used for the larger overall page structure.

So, to style your lists and block quotes, what you’ll want to do is:

  1. Make sure the rich text block that’s connected to your Collection has a class name
  2. Drop a second rich text block onto your page, give it the same class name as the connected block*
  3. Format one bit of the rich text as a block quote, another as a list
  4. Style those bits as you need them to be in the connected block, and click the “when inside of” text below the Selector field to nest these styles within the class that governs your rich text block

This is explained in this University article: Rich text element overview | Webflow University

*Alternatively, you can just drop a block quote and a list on the page and when you go to style them, make sure you’re styling All Blockquotes / All Unordered Lists / All Ordered Lists. This can result in cleaner code, but can be a little trickier to maintain.

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