Reduce font-size one specific title? « Support Forum | Kriesi.at

Support Forum » Broadscope

Reduce font-size one specific title?

6 posts from 4 voices

Started 6 months ago by vanwero
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

vanwero
Member

Hi,

is it possible to reduce the font-size of only one specific title?

As you can see on my website here, I work with 3 columns and at the fist row, second column, my title is just a little too big...
http://kbc.verzekeringen-portaal.net/autoverzekering

Is it possible to lower its font-size a little bit, without changing the font-size of the other titles?

Thanks in advance!
Vanwero

Posted 6 months ago #
Devin
Moderator
Hi Vanwero,

It looks like this is within the visual editor so you should be able to select that header text and then in the html view add a new class to that h4 element. Then, you can add new css for that class that changes the font without effecting anything else.

So in the html tab view add the class kp-small-header like this:
<h4 class="kp-small-header">Aansprakelijkheid</h4>

If there are other classes already on the element, just leave them there. Then add the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
kp-small-header {
font-size: 28px !important;
}
```
Regards,

Devin
Posted 6 months ago #
vanwero
Member

Hi Devin,

thank you so much for your answer!
It seems to be the correct code you gave me, but... it does not work.

You can see the result at my development-environment:
http://dev.verzekeringen-portaal.net/autoverzekering

Put the code <h4 class="kp-small-header">Aansprakelijkheid</h4> instead of: <h4 class="post-title">Aansprakelijkheid</h4>
And
both tried to paste this code in the Quick CSS and style.css...:

kp-small-header {
font-size: 50px !important;
}

But in the 2 cases, same result as seen above...
I also put a higher px-value in it,... to see if it gets bigger, but nog change in the result.

Any idea?

Thanks already!
Vanwero

Posted 6 months ago #
Dude
Dude
Hey!

Devin forgot a . in the code snippet above - please try following code instead
```
.kp-small-header {
font-size: 28px !important;
}
```
Best regards,
Peter
Posted 6 months ago #
vanwero
Member

Hi Dude,

thanks, works fine now!
(Sorry, I don't know anything about this type of code, otherwise I could have know it about this dod in front!;-))

Thanks too, Devin!

Kind regards,
Vanwero

Posted 6 months ago #
Ismael
Moderator

Hi Vanwero,

Glad that Peter and Devin helped you. I've marked this thread as resolved. :)

Cheers,
Ismael

Posted 6 months ago #