Docs

[WPH2o]

Hello,

When I create a Custom Headline it is NEVER mobile friendly/mobile ready.

Can I add “.responsive” to a Class and force Custom Headlines to be responsive?

Imagine, in the Cornerstone editing panel, scrolling down to the Class field, adding “responsive,” and finally the headlines are responsive.

The only alternative seems to be using the responsive short code (which takes a master’s degree in engineering to make work well).

Any chance we’ll get a “responsive” class we can add to Cornerstone elements that are currently 100% NOT mobile friendly?

Thank you,

Chris

ALL SITES
NO LOGIN OR CREDENTIALS NEEDED TO ANSWER THIS

[Joao]

Hi Chris,

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

Hope this helps.

Cheers!

[WPH2o]

I’ve done similar things using the X Theme responsive code.

Problem is: WHO KNOWS WHAT THE MINIMUMS AND MAXIMUMS SHOULD BE?

Almost all other elements in the site are responsive.

Why can’t headlines and text automatically be responsive?

[Friech]

Hi Chris,

I understand what you’re trying to say, actually the headings (h1 – h6) on are all responsive by default. They are all responsive to the browser’s default text size. For example the <h1> and .h1 class has set to font-size: 400%;. That means 400% of the standard text size of the browser which commonly is 16px. Its just some words are lengthy, and because it does break as two lines some of the letters gets out of bounds.

Anyways, we can declare a class that you can easily control and applied to a headline if you have this kind of responsive issue.

/*tablets*/
@media (max-width:  767px) {
 .resp-h1 {font-size: 200% !important;}
 .resp-h2 {font-size: 120% !important;}
}

/*mobile*/
@media (max-width:  480px) {
 .resp-h1 {font-size: 150% !important;}
 .resp-h2 {font-size: 100% !important;}
}

Feel free to adjust the values.

Cheers!

[Author]

Posts