[Resolved] Put the H1 in text-transform: none

[Author]

Posts

[frederiqueC]

I am trying to:
Put the H1 in text-transform: none
To create the H1, I use the "container" block of Toolset to have a nicer effect.
The problem is, I can't get the H1s to text-transform: none. They are still capitalized and I hate that.

Link to a page where the issue can be seen:
For exemple : hidden link

I expected to see:
I want to H1 in text-transform : none

Instead, I got:
I have H1 in text-transform : capitalize

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

The text-transform rule is being imposed by Elementor kit rules rather than Toolset.

I'm afraid you will need to add some custom CSS to counteract its CSS rule (unless you can find a setting that will prevent it being added in the first place).

[frederiqueC]

Hi Nigel,

I tried with h1 {text-transform: none;} in the template's custom CSS but I can't.
I'll contact Elementor if it's from them.
Which seems strange to me since I go through a toolset container and not through Elementor.

I come back to you as soon as I have an answer that results in what I want.

Thank you for your reply.

Regards
Frédérique

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Frédérique,

Thanks for writing back.

Active theme and plugins can all collectively include CSS styles to the website, which are applied as a whole and not just to specific sections.

For example, this is the code that is responsible for 'capitalizing' the H1 headings, and it is part of a file loaded by Elementor:
( file: {yourwebsite.com}/wp-content/uploads/elementor/css/post-1450.css )

.elementor-kit-1450 h1 {
    color: #3F3A64;
    font-family: "Jost", Sans-serif;
    font-size: 76px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1.1em;
}

To override that, using custom CSS code, you can use:

.elementor-kit-1450 h1 {
	text-transform: none !important;
}

Note: Elementor's official support team will be in a better position to assist you in how the styles are included in that CSS file.

regards,
Waqar

[frederiqueC]

Finally, I found the solution on my own after Elementor's agents made it clear to me to fend for myself. Short!
I just had to add a line of custom code in the "Elementor" extension.
It was too simple that I hadn't even thought about it.

Here the support is much more efficient! I love.

Here is!
Have a lovely day everybody!

My issue is resolved now. Thank you!