I am a having a frustrating issue preventing me from correctly styling rich text on a mobile viewpoint. Details followed by a read-only link below:
I am using a custom tag called “Post Introduction” to style a rich text element. Until today I had no trouble styling this as expected on any viewpoint.
Today I made a small change to the font for that tag.
The change was effective on all viewpoints except mobile.
For some reason that I do not understand, the styling would apply to the mobile viewpoint. The font remains unchanged, regardless of how I style the mobile viewpoint for that tag.
Oddly, the styling does work when the tag is apply to a regular paragraph (not rich text). But when it is applied to a rich text paragraph the styling does not apply to the mobile view only.
I did not make any other change that should affect this.
Rich Text elements are compound elements, with styling applied on the individual parts within- paragraphs, images, list items, headings, etc. You set those styles by classing the Rich Text element, but then selecting the internal item for styling.
Generally, you’ll want to style e.g.;
So that your styles are within that RTE only, and not to all paragraphs, site-wide.
From there, it’s just a question of breakpoint styles. Select the item you’re styling, and step through the breakpoints to see where your style is changing.
Note that to select these sub-elements, your RTE cannot be bound to a collection list. Unbind it first, then style it, then rebind it. Or, put an RTE on your draft Style Guide page, with the same Post Introduction class, so that you can easily access and style its sub-elements.
Thank you for the thorough reply, and apologies for the late follow up. Got buried in other things.
This was very helpful. Unbinding the RTE made it possible to style it! However, there is still definitely some weird behavior in the Webflow interface. Specifically, styling the RTE while bound was possible in the normal breakpoint, just not the mobile breakpoint. Seems odds that that would be inconsistent.
Do you think that is a bug? Or some quirk of how I build my page?
I think you must have been styling a different RTE. When an RTE is bound to a collection, you can’t select the sub-elements at any breakpoint.
What you can do is create a second, unbound RTE with the same class, and put it on a draft Style Guide page. That way it’s easy for you to adjust RTE styling without having to unbind/rebind it each time.
That may be it, because that’s exactly the solution I ended up doing. Thanks again!
Conceptually this makes a lot more sense now. The RTE is kind of like its own special div block with elements (headers, text, links etc) added dynamically as you write into it, with special set of class definitions nested within it.
Thank you! This has been a great learning experience.
Exactly. Webflow has some “simple” elements like images and test, and other “compound” elements like sliders, rich text elements, and form blocks, which are made of many components.
For the compound elements, each of them has a slightly different way of accessing, customizing, and configuring those parts. It’s a bit of a learning curve, but it works great once you’re over that hump.
