Responsive Headline Text

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