Make Headings Responsive on Mobile

Support
#1

Hello!

Can you tell me please what code to use, so that all my headings are responsive on mobile and tablet?
Because now, if the word is too long, it gets cut off, which looks really ugly.
The headings should keep the proportions, so that h1 is bigger than h2 and so on.

My site is: https://MarkoMitrovic.com

Thank you!

#2

Thanks for writing in! Yes you can use “Responsive Text” in Cornerstone – http://prntscr.com/ca5caq

Let’s add a selector there with minimum and maximum font-size – http://prntscr.com/ca5cgm

Then use the selector in Class field for your Custom Headlines – http://prntscr.com/ca5cq2

Alternatively, you can use CSS media queries.

Hope this helps.

Cheers!

#3

Thank you for your quick response @Joao

I tried out, what you told me and what I experienced was the following:

  1. All the headings look the same size and keep the proportions - like h1 bigger than h2 and so on. How can I achieve that exactly? Probably creating different “Responsive Text Elements” in Cornerstone, right?

  2. What are the optimum sizes to make it “look good” on mobile? Please tell me for every Heading size what I should fill in.

  3. How can I achieve that the Heading size only is responsive on mobile? Because now the changes you suggested affect the desktop heading size too and I don’t want that.

I really wonder why this isn’t implemented automatically for headings. If you look at my other website https://FlirtEmpire.com it cut’s of the headings so ugly on the front page on mobile. On Desktop it looks perfect.

Thank you for your help!

#4

Hi there,

Because of the size and settings. In order for the responsive text to work, you need to define the size, compression, and so on. And we can’t make it active by default and force users who don’t want it:slight_smile:. So instead, it’s an optional feature that user can use. Plus, some users wanted a text that breaks into words in smaller devices instead of scaling down ( for readability ).

And based on your requirements, responsive text is not applicable. What you need is a custom CSS. Example, you can add this to your global custom CSS.

@media ( max-width: 979px ) {
.m_responsive_h1 {
    font-size: calc(13px + 4vw);
}
}

Then add m_responsive_h1 to your heading’s Class input/option. You can play with 13px and 4vw, 13px is the base font size as it resize down.

Thanks.