How to adjust font size when using the CMS so that my titles don't get cut off if they're very long

Design help CMS
1

Hi, so it’s my first time using the CMS and I need some advice on how to deal with long titles for blog posts. On the article template page it’s not an issue, but in the blog feed page itself I’m worried about editors using very long titles, two lines should be fine, but can one adjust text size

Image 2020-08-18 at 4.56.09 PM
Image 2020-08-18 at 4.56.09 PM1332×429 215 KB
dynamically somehow if the titles becomes too long so that the design isn’t pulled apart.

Here is my public share link: [LINK][1]
https://preview.webflow.com/preview/aurora-bba874?utm_medium=preview_link&utm_source=dashboard&utm_content=aurora-bba874&preview=c39b44defd6d1d24e4dc16cca0715e84&mode=preview

2

These are 3 options.

  1. You can use Richtext h1 to h6

  2. 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;
    }

  3. You can create in CMS number field

    • Desktop font-size
    • Ipad font-size
    • Mobile font-size

    Screenshot by Lightshot
    Screenshot by Lightshot
    Screenshot by Lightshot

    These CMS fields use embedded styles like

    • For Desktop in embed code
    .yourclassname yourtag { font-size: link your CMS field Desktop font-sizepx; }

    • 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;
      }
      }