Multiple CSS styles increasing font-size for all Knowledge article content
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-29-2022 08:38 PM
Have been trying to work out why Knowledge Article content is all slightly larger in font size than defined. A customer noticed because they have content editors who care about the result and would like to understand so they can tell them how to style the content correctly.
All styles, H1, H2, P, and others. H1 is defined as 24pt and this is being displayed as 32pt. P is 12 pt but displays as 16. For H1 we have:
- 1 CSS style specifying a 10pt size
- 2 CSS styles reducing the font size and another
- 8 CSS styles increasing the font size
Anyone got any recommendations to manage this without having to tinker with, or restyle, key CSS items. I am well aware that some small changes can cause massive issues.
H1 Font Size
H2 Font Size
Paragraph Font Size

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-03-2022 07:05 PM
Does it appear correctly in platform view, and only larger in EC? If so, EC’s associated Theme and Theme’s CSS Includes has some default font sizes that can impact it. You can override these by updating the Widget instance CSS on the article page.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-05-2022 04:50 PM
Sadly I dont believe this is a valid option. I think they are just going to tell content writers that the font sizes will be increased and to modify their content;
- Text size is set as content in Knowledge Articles so I cannot override the content CSS as that is set on the pages and will likely change
- Adjust the CSS which is increasing the sizes - I could find all the styles adjusting the size in the Portal and override the size by reversing the increase to the widget instance CSS
- I need to find all of them all and the math is risky as there will be glitches
- I need to ensure they do not affect other content - Would need to position inside suitable classes such as the KB article container
<div class="kb-wrapper panel-body kb-desktop" ng-class="c.isMobile ? 'kb-mobile' : 'panel-body kb-desktop'">