Responsive Text Not Working - X

[tomr96]

Hi,

I have been trying to get my responsive text working now for about 8 hours in total, using Headline elements, Text elements and nothing will give and it just won’t work.

I have setup new classes and put them into the class section (without the “.”) and this doesn’t work.

Please can someone help me as I am pulling my hair out over what is causing this issue.

I have followed this:

this:

this:
http://demo.theme.co/integrity-1/shortcodes/responsive-text/
this:

Font scaling does not work

and this:

Getting responsive text to work

I have followed them all and just cannot get my responsive text to work.

I want my headings on the page labelled “Home” to be responsive - min 40pc max 60px - but I just cannot get it to work.

I have been in and turned off all caching and cleared it all on the web host and on WordPress.

See Secure Note for details.

Thanks, Tom.

[ruenel]

Hello Tom,

Thanks for the very detailed post information. Please be aware that a minimum of 40 pixel for the font size is still quite big in smaller screens. Keep in mind that the font size is computed based on the total width for the headline element to display. And I also noticed that in your headline element, you inserted this:

<p>A small agency with <span style="color: #00c9a7;">great</span> skills 📈</p>

If you are using a headline element, do not wrap your contents with a <p> tag because you are not allowed to nest a paragraph tag inside a heading tag.

Please edit your headline element contents first and test the responsive text again.

[tomr96]

Hi,

I have removed the <p> and it’s just put back.

I have also created a new headline element just from the default and it comes with the wrap <p> around the text… So unsure if that’s an issue with Cornerstone?

So to conclude it doesn’t work, whether that be because I cannot remove the <p> or because of another reason - I cannot work it out.

I have put login details into the Secure Note so you can test with the headlines mentioned, very bizarre.

Also note thr 40px text size is just me testing, trying to get it to work, I have had it at 24px to 35px before and still nothing.

Thanks, Tom.

[christian]

Hey Tom,

Let’s demystify the p tags first. The only factor that will automatically add that is if you switch to the Rich Text editor. WordPress formats the content thinking it’s lacking tags. I’d recommend you avoid switching to the Rich Text editor when you’re editing the Headline element.

-----------------------------------------------------------------------------------

Regarding the Responsive Text issue, your text doesn’t scale because you’ve set px based value. You’ve set your Headline to 70px.

You should use em or rem unit. For more details about those units, please see https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

By the way, I had to point out that I didn’t see the Font Size option at first because Advanced Mode was disabled in your site.

The Minimum and Maximum Size in your Responsive Text setup is not that far so though your text would be responsive following the em setup, you might not see a drastic change. Try setting the Minimum Size to 12. Also, play with Compression levels.

.

Hope that helps.