Responsive Headline Text

Support
#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?

#21

Hi David,

Please update your code to this:

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

Hope it helps :slight_smile:

#22

Hi, thank you for your reply. However, it does not seem to be targeting those headings wrapped in a link tag when changing the selector to responsive_text selector=".entry-title a". When I make my window smaller, the headings seem even to be getting slightly bigger…

#23

Hi there,

I can’t get this headings resize properly, so I set now a smaller size in css for the blog page:

.x-iso-container-posts.cols-3 .entry-title {
  font-size: 160% !important;
}

In case you know how to make the entry-title a responsive, please let me know, otherwise I will leave it the same size like the css above. Many thanks!

#24

The code won’t work because the x_before_the_content_end hook only applies to the single post and not the index. The updated code provided by Thai also will not work in the single posts because the Entry Title in single posts is not a link or does not contain a link.

The best solution here is to use custom CSS especially utilizing fluid typography like the other user suggested (see https://css-tricks.com/snippets/css/fluid-typography/). It is also because our Responsive Text shortcode uses Javascript so you need to use it sparingly as it could slow down your page.

Anyway, the question now is do you need to target both the Single Entry Title and the Archive Entry Title? If so, please revert your code to the working version. The one that works for the single post.

Then, just target the Archive Entry Title using a different action hook and function like this example:

/* Footer Actions */

function footer_actions() {
	if ( is_home() || is_archive() ) {
      echo do_shortcode('[responsive_text selector=".entry-title a" compression="1.5" min_size="22px" max_size="78px"]');
	}
}
add_action( 'x_after_site_end', 'footer_actions' );

Please take note of the X action hook used and the WordPress conditionals

You’re also using Masonry layout so though the Responsive Text will work, its effect will not be fully appreciated because the width of each post is small from desktop to mobile.

Thanks.

#25

Alright! Thank you very much!

#26

You are most welcome. If you have further question, please create a new ticket and share the details in the same. :slight_smile: