How to style rich text block for different cms layouts

Design help CMS
1

Hi all,

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

image
image718×1276 134 KB

and a draft for layout 2:
image
image718×1008 97.6 KB

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.

image
image1920×1028 127 KB

image
image1920×1034 115 KB

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)

2

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

3

Hi Craig!

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

image
image1920×1036 130 KB

image
image1920×1036 131 KB

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.

4

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.

5

Hi Craig! Here’s the read-only link:
https://preview.webflow.com/preview/liyi-liyi-mendozas-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=liyi-liyi-mendozas-portfolio&preview=c9cacf9b7764ad338d109f8eab121bcd&pageId=622e2e7b12b97320f6713f6e&itemId=622e3d199a0a85cc6f7d6ec0&workflow=preview

6

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.
7

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

1 Like