Resizing richtext drawing from CMS for different breakpoints

Hi There

I have published some blog posts for my charity using the CMS function. I used richtext in these and they look fine on the web pages, but they don’t seem to resize appropriately for mobile viewpoints (e.g. the “quotes” function is huge and the normal text function is really small).

I don’t seem able to resize for each viewpoint as the class is pulling from a generic ‘richtext’ tag and any edits to this in the panel don’t seem to affect the page at all.

Here is my public share link: Webflow - Yandisa Foundation

The best way to do this is:

  1. go to one of your blog template pages. I used your “BINGO” post as an example.
  2. Add a rich text element to the page and assign the class “.rich-text” to it (this is a class you’ve already created)
  3. Select one of the elements inside of this new rich text box (I’ve chosen the first heading “H2 Heading2”
  4. In the selector field choose “All H2 Headings”
  5. Then choose “Nest Selector inside of Rich Text”
  6. Go through each viewport width and style each of the elements

Check out:

1 Like

Port of Folio nailed it. One of the trickier things about Webflow and rich text is that when a rich text element is CMS bound, you lose the ability to do any styling on that element.

The solution is to maintain a “copy” of that RTE on a hidden static page, with the same Class. Keep that one un-bound, and you’ll be able to select and style sub-elements normally.

A couple of tips to add to Port of Folio’s advice;

  • Put your styleable RTE on a special Style Guide page. You can mark it as Draft, since you will only need to access it in the designer. I usually have a Style Guide folder, and then have several pages in it, e.g. a blog page, a product page, etc, along with the special styling mechanics I need to centralize there.
  • In your RTE, put all of the elements that you might use in the CMS, and style all of them - headings, blockquotes, list items, bold and italic text, superscripts and subscripts, etc…