Multiple CSS styles increasing font-size for all Knowledge article content

Gavin Jolly2
Tera Contributor

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

 

GavinJolly2_0-1669778740084.png

  H1 Font Size

GavinJolly2_0-1669782941966.png

 

H2 Font Size

msedge_WjFFlu1YLY.png

Paragraph Font Size

msedge_tOw2fKHAmP.png

 

 

 

 

0 Helpfuls
  • 951 Views
2 REPLIES 2

Susan Britt
Mega Sage
Mega Sage

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

0 Helpfuls

Gavin Jolly2
Tera Contributor

‎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;

  1. 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
  2. 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
    1. I need to find all of them all and the math is risky as there will be glitches
    2. I need to ensure they do not affect other content - Would need to position inside suitable classes such as the KB article container
    3. <div class="kb-wrapper panel-body kb-desktop" ng-class="c.isMobile ? 'kb-mobile' : 'panel-body kb-desktop'">



 

0 Helpfuls