Streaming live at 10am (PST)

Styling images in dynamic RTF

I have a Rich Text Element tied to a collection for publishing blog posts. Here, the client will publish text and images. The text column needs to be no wider than a certain width (704px in this example) for legibility reasons. I’ve therefore set the max-width of the RTE to 704px. This also causes images published in the RTE to be as small as the text column. How could I give the client the option to publish full-width images where they want in the text flow?

Your RT element should still be 100% of its container. Then you’ll give a class to the RT. Then, and before linking the RT to the collection, You’ll style titles, paragraphs, quotes and lists and give them a big right padding. This way you’ll get a narrow text and the images will still take 100% of their container.

There is another way by taking control of the Figure element inside of the RT, but you’d have to make it bleed outside of the RT and it’s neither easy or ideal. In the end, having to give a padding to H1 H2 H3 H4 H5 H6 P Quote and lists will be easier and quicker.

I’m wondering if there is a cleaner solution to this yet?
It’s a bit tedious to adjust the paddings for all the text elements and breakpoints.