Style Change in CMS Article

Design help CMS
1

I am trying to change the format of the heading styles within a blog post. I’m sure I just overlooked the option to do it. On the CMS page where you construct your blog, I am able to change the heading to a preselected Heading 1, 2, 3… When I publish it though, it shows up in Times New Roman with no visible size or font difference. Where or how would I be able to edit the format of said headings. Thanks!

2

Welcome to the forum. Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.

If your project has custom code or layout issues on the published site, please share that URL/URI as well.

3

Curt, styling is not managed in the CMS, it’s managed by the Rich Text element that you bind your content too. Have a look in the Webflow university for tutorials on how to use and style the Rich Text element.

4

For a particular CMS page, you can add a data-attribute slug and you can set CSS use in data-attribute
Example:-
Page1, Page2, and Page3 in CMS you can change for Page2 Heading font size.
I have added data-attribute on the body use slug because of slug unique id in CMS so you can use and add CSS for only Page2
Screenshot by Lightshot,
Screenshot by Lightshot
[data-body=“bonzai-scrollx”] .yourclassname {
font-size: 20px;
}

Or only size changes so other option

You can create in CMS number field
- Desktop font-size
- Ipad font-size
- Mobile font-size

  https://prnt.sc/iT5ftr-MlVQ8
https://prnt.sc/_dsV1ZdH-wTp
https://prnt.sc/sNaYMe9hfS_j

These CMS fields use embedded styles like
 - For Desktop in embed code
 <style>
.yourclassname yourtag {
    font-size: link your CMS field Desktop font-sizepx;
}  
</style>

  • Ipad font-size
    @media screen and (max-width: 991px) {
    .yourclassname yourtag {
    font-size: link your CMS field Ipad font-sizepx;
    }
    }

  • Mobile font-size
    @media screen and (max-width: 767px) {
    .yourclassname yourtag {
    font-size: link your CMS field Mobile font-sizepx;
    }
    }