This article was last updated on the January 2, 2017.
Each Stack has unique styling for individual Shortcodes. For complete reference and demonstration, please refer to these pages: Integrity, Renew, Icon, Ethos.
Of all the elements involved with responsive design, text can be one of the trickiest to work with. It does not alter its appearance or change size easily like certain other elements do (e.g. images). However, with X we've worked to address this with our [responsive_text] shortcode, which allows you to target certain groupings of text and have them change their size as the browser window is resized. This isn't something to use throughout your entire page or for huge swaths of body text, but it's a great feature to have for home pages, squeeze pages, and design elements that require a specific layout to stay in place.
How the [responsive_text] Shortcode Works
Before we begin, it's important to understand how the [responsive_text] shortcode operates. The [responsive_text] shortcode does not add any content to your pages or posts. Instead, utilizing this shortcode inserts the <script> that powers any given element that it is set to target. Let's take a moment and run through each of the attributes available for the [responsive_text] shortcode:
selector – Accepts a unique selector used on any text element that you want to be responsive.
compression – Set this to any number to alter the compression of how slow/fast your text responds as you resize the window. Start at 1.0 and make slow incremental changes to see what works best for you.
min_size – The minimum font size that you want your text to be. Accepts pixel units.
max_size – The maximum font size that you want your text to be. Accepts pixel units.
Should you have any further questions after reviewing this article, let us know in the forum so that we can work to improve the information provided.