Responsive Text in Header Pro (shrink size)

[mickna]

Hi Team,

can you explain exactly what I have to do to let a text be responsive (shrink according to the size of the browser window)?
I always end up with a truncate Text “Lorem…” or with a hard cut “Lore” (eipsum is missing)

Thank you,
Michael

[christian]

Hey Michael,

Please see the answer from this similar thread https://theme.co/apex/forum/t/pro-header-builder-and-responsive-text/458/2

In summary, what @kory is saying in that thread is you apply a responsive font size value like this calc(2vw + 10px) to your text. You can see what I’m saying in this screencast.

Thanks.

[mickna]

Hey Christian,

thank you. I get an idea, but I can’t reproduce it on my side.
Basically I do not really need a scaling over a period. I just want to set one break point and scale my headline smaller.
I also simple tried:

@media (max-width: 400px){
  .h1 {
   font-size:10%;
  }
}

Moreover I have a inline svg and now I am total lost how to handle this…
I know, this is not really your scope, but maybe you can point me to a direction.

Thank you,
Michael

[Alaa]

Hi Michael,

In this case, I’ve added a custom class “custom_header” for this heading text as you can see in this screenshot:

Then you just need to add this CSS code to (Pro > Theme Options > CSS):

@media screen and (max-width: 480px){
    .x-text.custom_header h1.x-text-content-text-primary {
        font-size: 0.7em;
    }
}

Thanks.

[mickna]

Hi Alaa,

Awesome! Thank you so much!

Have a great day and again thank you,
Michael

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!