Responsive Headline Setup

Support
#1

Hello!

I’m using quite a large font for the headlines on a lot of my pages, and would like them to be responsive so that they show up properly on mobile. Currently, this is what happens to some of the pages:

I know there’s the Responsive Text option, but I’m unsure of how to utilize this properly. Currently, for these headlines I’m using Custom Headline with the class “tool-title”:

.tool-title {
  color:#0066B3;
  font-size:120px;
  line-height:100px;
	margin-top:0;
	margin-bottom:0;
}

May also be worth noting that this utilizes the H1 styling.

Here’s a page example:
https://learningcycle.freeman.com/ofbd/studio/opportunity
(https://learningcycle.freeman.com/wp-admin/post.php?post=328&action=edit)

How can I set up Responsive Text so it works with the desired headline effect on mobile?

Thanks so much!

Cheers,
DB

#2

Hi There,

Thank you for writing in! To utilize the Responsive Text Setting, first add a class to your Custom Headline element.

screenshot

Then you’ll be using this class as the selector of your Responsive Text Setting.

screenshot

Play with the compression, min-size and max-size until you get the desired look.

How to apply a Responsive Text Settings

Hope it helps,
Cheers!