Custom Headlines not responsive to mobile

Hello,

On my website: http://makemedia.us/services
I have some custom headlines that when viewed on my iPhone 7 Plus in portrait orientation fall off the page.
They’re not properly fitting into the column they should be confined to.
When in Cornerstone, they appear fine in the mobile preview.
But when I actually visit my site on my phone, they don’t all fit.

Thoughts?

Thank you.

Hello There,

Thanks for writing in! By default the custom headlines has its own font sizes. The headings are quite big enough on mobile screens. To resolve this, you may need to apply Responsive text and manage it in Settings > Responsive Text. To know more about responsive text, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/
http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Please let us know how it goes.

1 Like

Ok, this looks like it should work.

Just one question: where do I add the responsive text shortcode?
Do I add it in Cornerstone somewhere?
If so, where exactly?

Thank you.

Ok, I did some digging around and I found you can add shortcodes by adding a Raw Content element and placing the shortcode in there. So, I added a Section to the bottom of my page and put Raw Content element with my shortcode in it, and it works!

Here’s my problem now, because I added a section I have unwanted white space at the bottom of my page. Should I not have added a section? Was there a better way for me to add the Raw Content element without it effecting anything else on my page? Or is there somewhere else to add the shortcode where I don’t even need a Raw Content element on the page?

Thank you!

Hi,

Instead of using shortcode please use Cornerstone Resonsive Feature.

You can simply add a unique class to your Custom Headline

Then add the class as selector

Options

selector: the selector used to target the text that you want to be responsive. Best use comes from adding a class to all text elements you want to alter, for example, “h-responsive” might be added to all headings you want to be responsive on a page. Next, you would simply write “.h-responsive” in this field (the included period denotes a class selection).
compression: set any number from 0.1 on up. Adjust number to suit your needs.
min_size: set a minimum font size in pixels for your heading if you so desire.
max_size: set a maximum font size in pixels for your heading if you so desire.

Hope that helps.

Perfect. That’s definitely a much better way than adding an empty section just to put a Raw Content element in the page. Switched to the method explained above, and everything’s working great. Thanks.

Glad we could help.

Cheers!