I am creating a CMS template page for job posts and using the Rich Text element to fill out the relevant areas of the job post (title, salary, job description, etc.). I used styles to format different elements within the rich text (headings, lists, paragraphs, etc), for example, by using “All H4 Elements” for H4. However, I ran into a problem when adjusting the design of the template for different screen sizes.
For example, the font size I used for H4 in desktop, laptop, and tablet, looks really good, but when on mobile, it looks a tad too large. For this reason, I want to change the H4 font size only for mobile. This is where I get stuck.
Is there any way where I can, either create two different formatting styles for Rich Text, or I can create conditional formatting so that the styles update depending on screen size.
I am super new to using Rich Text or Webflow, for that matter, but I can’t seem to find any information online. Maybe I am asking the wrong questions?
You have to edit the elements’s styles within the Rich Text element at every screen size, the same way you would do with regular elements.
For example, you can add a rich text element to your page on laptop view and add an H4 element. While selecting that element, got to the styles tab and select “All H4 Elements”, then you can style the element in that screen size. To edit the element in other screen sizes, just click on the different screen options at the top of the page and edit the element again. This saves the formatting of all H4 elements in the different screen sizes.
Hope this helps other newbies like me hahahah.
NOTE: If this is not best practice, please do let me know.
