Headline not scaling for mobile

[bakrona]

Hi there

I have set a column width of 600px for the desktop layout . On mobile the text is full width which is good. Hoever the headline runs over the screen edge.

How can I make a headline adapt to the mobile screen?

[ruenel]

Hello @bakrona,

Thanks for writing in! The headline is not resizing or responsive because in your child theme’s style.css you have added this:

h1, .h1 {
    font-size: 280%!important;
    text-align: center;
}

Please remove the classic headline and use the Headline element instead.

Kindly let us know how it goes.

[bakrona]

Hi there

I dont manage to get it right. I removed the custom CSS and added a headline instead of custom headline but it blows up even more on mobile

[ruenel]

Hello @bakrona,

On smaller screens, I am already seeing this:

Can you please provide us a screenshot of what you are seeing?

Thanks.

[bakrona]

ok this seems to be working now. However on another page I am still facing the same issue with H1

Furthermore I would like to understand how i can switch from classic to new headline item
in classi, i have the option to select the tag and then also the design which means if a H1 should look like a H1 or a H2 for example. How do I manage this in the new headline so that the classic and new headlines look the same?

[ruenel]

Hello @bakrona,

You cannot switch the classic to the new headline element. You actually need to manually delete the classic element and insert the new headline element. With the new element, you can only select which H tag to use. There is no option to have it look like the h2 or h3. You will have to set the font size and other style design to the headline element. What is very convenient though is the capability of this headline element to have your current styling be saved as a “Preset”. You can then apply this preset whenever you insert another headline element with the same styling.

Hope this helps.

[bakrona]

OK , I see, thank you

Could you nevertheless have a look at this page and see why H1 is not scaling on mobile?

[nabeel]

Hey @bakrona,

If you need your text to scale or respond according to the screen size then you should use the Responsive Text feature. First give your Headline element a class e.g responsive-text (see screenshot)

Then click on Settings tab and under Responsive Text title click on Add Item button:

Add .responsive-text in Selector field and add Minimum and Maximum font sizes. Also take a look at this thread here Responsive text Header

Hope this helps!