How to style rich text block for different cms layouts

Hi all,

I am trying to implement 2 layouts for my portfolio website, here’s a draft for layout 1:

and a draft for layout 2:

I have trouble styling the rich text block for layout 2(styled with ‘rtf2’). I want it to be wider than rich text block styled with ‘rtf’.
I have created a style but as soon as I link the new rich text block to the cms field, it doesn’t follow the style.

I’m not sure how I can state this more clearly. Pleas let me know if I need to specify anything!

Here is my public share link: LINK
(how to access public share link)

Hi Lily - The rtf2class is most likely inheriting padding or margin values from the Content section or Layout-2 container, perhaps check these first.

Hi Craig!

Thank you for your reply.
I checked the styling for Content and Layout-2:

There’s no padding or margin for Content, and I just changed the max width of Layout-2 to be 100%. The rich text block still doesn’t use the rtf2's width, although it is following the text style.

Are you able to share your project link? If you don’t feel comfortable sharing it publicly feel free to message it and I will take a look.

Hi Craig! Here’s the read-only link:

Thanks for sharing. You are correct this is not behaving as expected.

Perhaps delete the Layout-1 and Layout-2 elements and rtf and rtf2 classes and start this again.

  1. Drag in a new section.
  2. Drag a container into the section. Add a class and max-width as desired to the container.
  3. Drag the rich text element into the container and bind to the collection.

I deleted the section and container and created new ones. Now it works! Thank you so much!

1 Like