H1 with different font size

Support
#1

Hi there, I want to use different font size within H1. How can I do this?

At the moment my H1 says

DATENLOGGER
TEMPERATUR, DRUCK & FEUCHTE

So the second part TEMPERATUR, DRUCK & FEUCHTE should be in the font size of H2 but i still want this text to be part of H1

How can I achieve this?

Thanks

#2

<h1 class="your-class-here">TEMPERATUR, DRUCK & FEUCHTE</h1>
and refer to it in CSS such as:
h1.your-class-here { font-size: [h2-font-size] }
or
<h1 style="font-size: [h2-font-size]">TEMPERATUR, DRUCK & FEUCHTE</h1>

#3

Hi there, thanks for your input

so what would i write in the text field of the custom headline?

DATENLOGGER

TEMPERATUR, DRUCK & FEUCHTE

And what would I use as font size to have it in the same size than H2?

if I write the text as above, the second part is way too large

#4

Hi @bakrona,

In the custom headline element (presuming you’re using Visual Composer), go into the text tab and use something like in this screenshot…

Hope this helps.

#5

Hi There

Alternatively you can use the Custom headline element, choose H1 looks like H2

Or add a class h2 to your h1.

You can add the the class on your Classic text element style box at the bottom or use an inline code

<h1 class="h2"> hello Im a smaller h1</h1>

Hope it helps

1 Like
#6

Hi, thanks for the proposed solution. Two things

  1. Why is there such a gap bewtween DATENLOGGER and the line below?
  2. It is very important for me that both parts of the Text are recognised as one piece as only together they cover the relevant key word. I assume the solution you proposed makes two elements out of the custom headline. is it possible to have everything in one element?
#7

Hi there, thanks for the proposed solution

The problem is that if I implement it, the text gets blown up and is totally out of proportion. Not sure why

#8

Hi there,

Please add a Text Element or Raw Content element and add the code below there:

<h1>DATENLOGGER <span style="font-size: 13px;">TEMPERATUR, DRUCK & FEUCHTE</span></h1>

You can change 13px in the code to whatever font size you want the second part of the text to be.

Thank you.

#9

Thank you, this solution works well

#10

Glad it worked.

Cheers!