How Does the Responsive Text Setting work please!

[core365]

Hi, I’m using X Pro on a website and I’ve set some heading text as 3.5em so it’s quite large when viewed on a desktop which is what I’m after. The problem is, the font doesn’t change size when viewed on a mobile device and is way too big! I’ve tried to use the ‘Responsive Text’ option within ‘Page Settings’ but I haven’t got a clue what you’re supposed to enter for the ‘Compress’, ‘Minimum Size’ and ‘Maximum Size’ to get the result you’re after as it all just seems a bit random with a lot of guesswork! I’ve tried to look for documentation and help with this on the forum but I can’t find anything.

Can you explain to me what settings I’m supposed to enter if the text size is 3.5em when viewed on a desktop and I want it to display as 2.5em when viewed on a mobile phone - the other mobile device sizes in between should display the suitable responsive font size too.

It might just be me, but it’s so confusing and doesn’t appear to have a simple logical way of working!

Thanks!

[tristup]

Hi @core365,

Thanks for reaching out.
The Responsive Text option take the value for the maximum and minimum size in pixel, so you need to convert the em value to the respective pixel value. Then you need to add the class to the respective element to implement the font size.

Hope it helps.
Thanks

[core365]

Hi @tristup,

Thanks, but can you also explain how the ‘Compress’ setting comes into it and how it works in relation to the minimum and maximum size please.

Thanks!

[nabeel]

Hi @core365,

The compression is the incremental value of varying sizes. The minimum font size is of course is the smallest size where your font could respond to and the maximum font size is of course the maximum size too, BUT this size will not be enforced to your text. But rather a resulting size from your current container size, compression, and content density.

For example, 100px min and 350px max can result to 100px … 112px … 120px …. 250px …. 350px

A two word can just vary from 100px to 112px. While a paragraph can have 100px, 110px, 115px, etc. Max is just a peak, but not enforced.

This mean, the size varies depending the container size and content density ( much crowded text will likely to vary more that just few words )

To learn more please see the demo example here https://demo.theme.co/integrity-1/shortcodes/responsive-text/

Hope this helps!

[core365]

Hi, thanks for that, however it still doesn’t explain what the ‘Compress’ setting value does! How does it impact on the font size set and then the font minimum and maximum font size for the responsive text setting?

Thanks!

[tristup]

Hi @core365,

The Compress is the level of effect. The higher the value the drastic the change in font size. I would also recomend the Fluid text setup inplace of that.
Please find the video below explain the above: https://www.youtube.com/watch?v=SdQHpAgFumw&feature=youtu.be

Thanks

[core365]

Hi, thanks, but I tried the example given and it didn’t work! It’s also really confusing. I thought it would be a lot simpler than this to make the text responsive!

All I’m trying to do it to have the maximum font size at 50px when viewed on a desktop and then incrementally reduce down automatically in size to 20px when viewed on a mobile device. Is this achievable?

Thanks

[prakash_s]

Hello @core365

You can use Viewport Sized Typography by using VW unit. Please have a look at this article to learn more about how to set the font size with viewport width.

To get 50px font size in desktop and 20px in small devices you can use around 4vw size for the font. To add font size in VW unit you need to add custom style under X/Pro–>Theme Option—>CSS.

In case if you have no idea about CSS coding you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[core365]

Hi @prakash_s,

Thanks for the info. It’s a shame there isn’t a simpler solution or if the Responsive text setting in Cornerstone worked properly!

Thanks for your time and help!

[prakash_s]

Hello @core365

Regretfully, there is no such simpler solution for this, the Responsive Text of Cornerstone and the other option explained in the last answer works in a similar way and in most of the cases it works perfectly too.

Thanks