Font-weight, line-height & letter-spacing not working from CSS

[saravanan]

Hi, not sure what I am doing wrong: I am able to change all my font settings from the builder. But when I write the changes into a CSS, some work but many don’t. For example, in the example below…

.text-title-60 {
font-size: 60px!important;
font-weight: bold!important;
line-height: 1em!important;
}

font-size works. Others don’t.

Guys, don’t laugh if I am making a noob mistake

Thanks in avance

[friech]

Hi Saravanan,

Thank you for writing in, your custom CSS will not work to all text element because of its not specific.

Instead of using custom CSS, please utilize the element font-weight option.

If you don’t see these options on your end, please turn ON the Advance Mode

Cheers!

[saravanan]

Thanks @friech.

Currently, I am using the builder for making the changes. But there are so many settings to be modified, it becomes difficult to maintain consistancy across every piece of text element. So, standardization becomes a nightmare.

Also, at a later date, if we decide to reskin the website (bound to happen), we will have to rebuild everything. Mess.

So, if I write a CLASS and attach the class to the elemnt, both these issues are addressed once and for all.

PS: I find it strange that CSS class for font-weight not working! This is such a basic piece of CSS, why wouldn’t it!?

[christian]

Hey Saravanan,

Let me first start answering your question:

@saravanan

I find it strange that CSS class for font-weight not working! This is such a basic piece of CSS, why wouldn’t it!?

Friech, provided the answer previously.

@friech

your custom CSS will not work to all text element because of its not specific.

If you want to learn the details, please see https://dev.to/emmabostian/css-specificity-1kca

-----------------------------------------------------------------------------------

Now that you know that your CSS codes need to be specific. Add more parent classes to them. For example, our theme has a root element ID and it is x-root. You can use that to make your CSS more specific like:

#x-root .text-title-60 {
/* declarations */
}

If that doesn’t work, insert more parent selectors to it like:

#x-root #cs-content .text-title-60

You can see parent selectors if you’re going to use the browser’s element inspector.

Hope that helps.

[saravanan]

@christian_y, I realize that your team is teaching me the basic CSS lessons, which are truly outside your scope.

Much appreciated

[friech]

We are delighted to assist you with this.

Cheers!