Body Header typography responsive size

Support
#1

Hello

I have set the H1 header size for body text to 77px via custom css however it creates formatting issues when viewed on mobile.

I previously used the following code to set header size via custom css

body h1 {
font-size:77px !important;
}

Can can I replace this or add to it in a way that makes the header size responsive to mobile device width? Right now certain pages have their header text chopped off when viewed on mobile such as the page at the url below. Attaching my login details in a secure note below

http://bedstuyloveaffair.us/wordpressdemo/2017/09/07/queens-way/

#2

Hi there,

Please kindly remove the custom CSS and use our responsive typography functionality. For more information kindly read the article below:

https://theme.co/changelog/#theme-x-5-1-0

Hope it helps.

#3

Thank you for this. I tried removing the custom CSS but for some strange reason the page still displays with the header text chopped off on mobile. Do you have any idea what could be causing this/how I can fix it?

Thanks so much!

#4

Hello There,

I have seen your site in a mobile screen. The headings are quite big enough. You may need to apply Responsive text and manage it in Settings > Responsive Text. To know more about responsive text, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/
http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Hope this helps. Please let us know how it goes.

#5

Hello

Thank you for this. Since this page is not edited in cornerstone, how can I make the header text responsive? The text is indeed quite big enough, the problem I am concerned about is that on my device (normal size iphone 6) the header text is chopped by the screen boundary rather than being reformatted to fit

#6

Hi again,

Please add the following code in your Customizer:

@media screen and (max-width: 767px) {
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-size: 100% !important;
    }
}

Hope this helps!

#7

Thank you for this!

This does the trick but seems to make some header text smaller than necessary in some instances such as the page below

http://bedstuyloveaffair.us/wordpressdemo/2017/09/08/every-rose/

On mobile the header text is smaller than it needs to be but quite large on desktop

Any way to tweak this code to allow the text to swell larger on mobile without it exceeding the device width?

Thanks again!

#8

Hi there,

In that case, you should try this font-size: 10vw !important; instead of 100%.

Thanks!

#9

This is great thank you

One last thing-

With this new code the text is much better sized however it interrupts lines and chops them into the next line, for instance on the following page Lucy Bull at Queens Way appears properly on desktop- but there is a linebreak on mobile so it appears

Lucy Bull At
Queen Mary

http://bedstuyloveaffair.us/wordpressdemo/2017/09/07/queens-way/

Is there a way to modify the code so that it adjusts the text scale to the screen width but honors the existing linebreaks without chopping them up?

Thanks!

#10

The custom code we give serves only as a guide and we do not support issues arising from the use of it and further development. I commented out the custom code provided previously so I could see the issue.

The suggestions provided by @christopher.amirian

and @RueNel

are the proper ways to make text responsive in X.

I placed these Responsive Text shortcodes below your headlines.

[responsive_text selector="h1" compression="1.5" min_size="36px" max_size="78px"]

[responsive_text selector="h2" compression="1.5" min_size="20px" max_size="50px"]

It fixed the issue.

You will need to adjust the compression, min_size and max_size as per your design requirements.

Regarding the linebreak, please provide a screenshot of that issue so we could give the proper way to do that in X.

Thanks.