Scorecard component - CSS class not fully applied in Cell Layout

[Former Member]

I have a problem setting up a CSS class on one of my scorecard's columns. The column contains values and I have given it a CSS class LLHeading4 defined as follows:

@mediaall and (min-width:1300px){

.LLHeading2 {

font-size: 20px!important;

color: #FFFFFF!important;

text-align: left!important;

background-color: #9A8C7E!important;

line-height: 40px!important;

text-indent: 5px;

}

}

@mediaall and (max-width:1300px){

.LLHeading2 {

font-size: 16px!important;

color: #FFFFFF!important;

text-align: left!important;

background-color: #666666!important;

line-height: 32px!important;

text-indent: 5px;

}

}

In the Cell Layout I have the following settings:

When I run my application the background color from the CSS class is applied, but font colour and size are ignored and show as 12px, black i.e. as defined in the application:

If the CSS class were to be applied correctly, the fonts should look like this:

I have added !important into my CSS as it normally overwrites whatever settings are at the application level.

What is also being ignored by the application is the fact that the font sizes is meant to be responsive to screen size (20px or 16px). It works perfectly if I apply the same CSS class to text boxes but the scorecard ignores it. Interestingly, background color within the scorecard is responsive to screen resizing (I have made it change to black on smaller screens, just for testing, as normally I don't change it). It's just the font size and color that won't adjust.

How do I fix it please? Is this another bug in my earlier version of the tool?

Do I need to make CSS changes to the class="sapUiLbl sapUiLblNowrap sapXTableLabel sapXTableText" instead? I would like to avoid it, to be honest, as I think it might affect my entire scorecard unless I specify the n-th column, which makes it so much more complicated.

Many thanks,

Agata

[Former Member]

This is my html view:

Many thanks,

Agata