Icon List Font Size Not Staying

Support
#1

Hi,

I am setting the below CCS on a Classic Icon List and this is reflecting fine within the editor, however when actually viewing the website on any device the CSS appears to be getting overridden by something, but I cannot work out what it is that is causing it.

This is the CSS I am using:
.percentages-icon-list .x-ul-icons li {
margin-bottom: -20px;
margin-left: 10px;
font-style: normal;
font-size: 20px;
}

I just want bigger text for this icon list and so I have done it this way.

Thanks.

#2

Hello Tom,

Thanks for writing in!

Your custom css is incorrect. Please have it updated and use this code instead:

.x-ul-icons.percentages-icon-list li {
    margin-bottom: -20px;
    margin-left: 10px;
    font-style: normal;
    font-size: 20px;
}

Please let us know how it goes.

#3

Thanks! That’s all working now.

Just to note, so is this always the case with CSS/X Theme?

It is the default css class first (.x-ul-icons) and then the custom css class - e.g. for that Icon List - (.percentages-icon-list).

So for a heading with a custom class it would be the default-class.custom-class when adding it to the CSS section.

E.g.
.x-text-content-text-primary.my-custom-headline-css
Screenshot of E.g.

Hope that makes sense haha.

Thanks.

#4

Hello Tom,

It would be easier to use default-class.custom-class. The first one will indicate what element is it and then your custom class. Unless otherwise the custom class says it all wherein you can simply just use it like:

.percentages-icon-list li {
    margin-bottom: -20px;
    margin-left: 10px;
    font-style: normal;
    font-size: 20px;
}

.my-custom-headline-css {
  // some styling
}

Hope this helps.

#5

Thanks that’s great.

I am doing this because I cannot seem to find the location of the “Heading” bit of a skills bar within the UI?

Am I being blind?

Thanks.

#6

Hello Tom,

The skill bar title needs to be field or it will not display on the front end if you left it as blank.

And if you are using the skill bar shortocde, please check out the demo to know more how you can use the shortcode properly:

And if you want to customize the skill bar title, you can make use of this css:

.h-skill-bar {
    font-size: 20px;
}

Hope this helps. Please let us know how it goes.

#7

Hi,

I found the issue…

I was using a Stat Bar… Not a SkillsBar. :frowning:

Silly me! Sorry for wasting your time.

Thanks.

#8

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.