Responsive Headline Text

Support
#1

Hello, I am trying to have text in a headline element be responsive to screen size. I have found the following articles on the subject:

However, cannot I cannot find the responsive header setting found here: http://prntscr.com/8ioz6z

Please help

1 Like
Breaking of text in x theme template
#2

commenting here because I’m having the same issues.

#3

Hi,

When you edit your page in Cornerstone, click on the last icon on top.

If that doesn’t help, kindly provide your wordpress admin login in Secure Note

Thanks

#4

Thanks for the quick reply Paul.

I am using Pro to edit my site, not Cornerstone, is it possible to achieve this using Pro?

If not, is it possible to switch back and forth between Pro and Cornerstone in order to apply this effect in Cornerstone, but continue using Pro as my main editor?

#5

Hi There,

The PRO’s Content builder is the same as Cornerstone. It has also the Responsive Text Settings

screenshot

Thanks,

#6

The Settings and Responsive Text Settings do not appear for Headlines within a Header. Only within the content. My Header is within the Header section of my site. How to achieve this there please?

#7

Hi There,

Setup the Responsive Text Settings on the Content Builder (on the page where you’re going to assign the menu).

Then add the class on your Headline to apply the Responsive Text settings to it (https://prnt.sc/gk2vqc).

Thanks,

#8

what about for all of the blog posts? this is where it’s hurting me the most.

#9

Hi There,

In that case you need to use the responsive text shortcode, instead of the settings, Its the same feature.

[responsive_text selector=".responsive-heading" compression="1.5" min_size="36px" max_size="78px"]

Now the question is how can we automatically add a responsive text shortcode on individual posts. The following code will just do that, please add it on your child theme’s functions.php file.

/*Adding responsive text shortcode on individual posts*/
function add_respshortcode() {
  if(is_singular('post')) {
      echo do_shortcode('[responsive_text selector=".responsive-heading" compression="1.5" min_size="36px" max_size="78px"]');
  }
}
add_action( 'x_before_the_content_end', 'add_respshortcode', 10 );

Play with the compression, min_size, and max_size until you get the desired look.

Cheers!

2 Likes
#10

I’ve placed the code in my functions file.

this doesn’t do anything. I’ve changed all three variables drastically to see what effect it would have… and nothing.

#11

Post headlines has a class of entry-title. You should use that instead of responsive-heading in the selector attribute. If this still doesn’t help, please consult with a third party web developer as this is an additional function.

In case you don’t know and you might be interested, X and Pro has a Responsive Text setting in Options > Typography

That setting is the base or the root font size so it will make all text in your site responsive. Please see the Root Font Size info for more details.

Thanks.

#12

I’m aware of the responsive text setting but it doesn’t seem to affect the headers. or am I wrong?

#13

Hi there,

Yes, it has its own local styling (specific to that element). That’s just the base font, but each element could have their own.

Would you mind providing the URL you’re working on? Is it headlines built-in to the templates, or headlines from cornerstone elements?

Thanks.

#14

I am also having this issue. Can someone help?

#15

Hi @dolanl,

Thanks for writing around! Please follow https://theme.co/apex/forum/t/responsive-headline-text/8078/3 first.

Let us know how this goes!

#16 
/*Adding responsive text shortcode globally*/
function add_respshortcode() {
      echo do_shortcode('[responsive_text selector=".responsive-heading" compression="1.5" min_size="36px" max_size="78px"]');

}
add_action( 'x_before_the_content_end', 'add_respshortcode', 10 );

This worked like a charm. I removed the if statement to globally apply the responsive text to the selector sitewide. Then just made sure that all my headlines have that class.

#17

Glad it’s okay now and thanks for sharing :wink:

#18

This solution works very well for me:

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

html		{font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300))) !important;}

h1, .h1	{font-size: calc(24px + (32 - 24) * ((100vw - 300px) / (1600 - 300))) !important;}
h2, .h2	{font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300))) !important;}
h3, .h3	{font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300))) !important;}
h4, .h4	{font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300))) !important;}

More info here: https://css-tricks.com/snippets/css/fluid-typography/

2 Likes
#19

Thanks for the contribution!

#20

Hi there,

thanks for all the suggestions, it helped me a lot. I managed to add the responsive text shortcode to all blog post titles:

/*Adding responsive text to post tittles globally*/
function add_respshortcode() {
      echo do_shortcode('[responsive_text selector=".entry-title" compression="1.5" min_size="22px" max_size="78px"]');
}
add_action( 'x_before_the_content_end', 'add_respshortcode', 10 );

I am still having one difficulty: on my blog page, where the blog post titles are listed as an overview, the blog titles are wrapped in an <a> tag inside the tag <h2 class="entry-title">. So the titles there are not being resized. How can I target those titles in the responsive text selector?