Docs

[Chris Stovall]

For quite some time now, I’ve been using this method for creating responsive text and it’s been working great.

jQuery ( function($) {

 $(".three-box").csFitText(.88, { minFontSize: '24px', maxFontSize: '54px' });
 $(".h-resp-small").csFitText(.90, { minFontSize: '18px', maxFontSize: '22px' });
 $(".h-resp-med").csFitText(.90, { minFontSize: '28px', maxFontSize: '36px' });
 $(".h-resp-large").csFitText(.90, { minFontSize: '28px', maxFontSize: '38px' });
 $(".h-resp-max").csFitText(.90, { minFontSize: '48px', maxFontSize: '82px' });
 $(".main-header").csFitText(.80, { minFontSize: '', maxFontSize: '' });

});

I would like to find a way where I don’t need to hardcode the font sizes. It’s very time consuming.

My questions are this:

1) Can I use percentages in this code?

2) Could I have it only affect the compression of the text?

3) I’ve also read this thread which seems like a solid solution, but it’s not working at all.

https://community.theme.co/forums/topic/title-texth1-not-resizing-in-responsive-view/

Thanks in advance!
CDS

[Rupok]

Hi there,

It seems you are trying to achieve something that’s not the features by Responsive Text. You need to use the Responsive Text feature as is and it’s not possible to extend the features or functionality of it.

Thanks!

[Chris Stovall]

As you can see above, this code was provided by X theme to make the responsive text work on each page. It would be completely silly to assume one would have to create a new responsive text on each page for the same application.

The question is can I use just the compression or set the text to a percentage rather than a set size?

[Rupok]

Hi there,

Thanks for writing back. Unfortunately there is no way to define responsive text globally and apply to all pages. We already have some feature request for this and hopefully will be implemented in future.

Thanks for understanding.

[Chris Stovall]

I’ve been using this method for years now.

jQuery ( function($) {

 $(".three-box").csFitText(.88, { minFontSize: '24px', maxFontSize: '54px' });
 $(".h-resp-small").csFitText(.90, { minFontSize: '18px', maxFontSize: '22px' });
 $(".h-resp-med").csFitText(.90, { minFontSize: '28px', maxFontSize: '36px' });
 $(".h-resp-large").csFitText(.90, { minFontSize: '28px', maxFontSize: '38px' });
 $(".h-resp-max").csFitText(.90, { minFontSize: '48px', maxFontSize: '82px' });
 $(".main-header").csFitText(.80, { minFontSize: '', maxFontSize: '' });

});

The only question is can I use a font size percentage or only affect the compression?

I feel like you’re not really reading my question at all.

[Jade]

Hi Chris,

Yes, you can use % values in the JS code. It should work find but it will automatically be calculated into pixel values when you view it in the frontend.

[Chris Stovall]

Can you please provide an example of an updated code that would work? I tried and didn’t get a great result. The reason this is diffucult is becuase all of the x theme fonr sizes are percentages.

jQuery ( function($) {

 $(".r-header").csFitText(.88, { minFontSize: '100%', maxFontSize: '200%' });

});

Can you please test this and let me know if it’s working on your end?

Thanks!

[Rad]

Hi there,

I think that may not work. It’s like a loop, it will get the percentage from the original font size.

If the base size is 30px and it changed to 200% then it will become 60px. Now, it will resize down to 100%, and 100% of 60px is 60px. Base sizes are those with fixed value like pixels.

Thanks.

[Chris Stovall]

This reply has been marked as private.

[Lely]

Hi Chris,

Unfortunately, at this time I am not sure about your question. Would you mind clarifying so we can help you better?

[Chris Stovall]

Giving up on this thread now. I’ve asked the same question several different ways and I can’t seem to get an answer.

Thanks for trying!

= )

CDS

[Rahul]

You’re most welcome!

Let us know if you have any further queries with the theme. We’d be happy to assist you with it.

Thank you.

[Author]

Posts