Responsive Text

Text presents it’s own unique set of obstacles in responsive design. The biggest issue we often face is that it doesn’t resize, so setting a perfect size for a heading on your typical desktop screen won’t scale down properly like an image would. Fear not! This is where we come in. We’ve included an incredibly simple-to-use shortcode called [responsive_text] that allows text resizing to take place.

Simply give the heading you want to target a unique selector, and then target it with the shortcode. For example, let’s say that you wanted to target all of the headings on a particular page, you could give them all a class of responsive-heading (e.g. <h3 class="responsive-heading">I'm a Heading!</h3>) and then target this heading with the [responsive_text] shortcode like so, [responsive_text selector=".responsive-heading"]. Make sure to include the proper selector when using IDs (#) or classes (.) with this shortcode. Note that this feature should typically only be used on heading text as using it on body copy or multiple paragraphs can be resource intensive.

Next, you’ll simply set a compression level (any number from 0.1 on up), and a minimum and maximum font size if you so desire. Try resizing your browser window to see how the text below changes and make sure to view the code sample below to see how we accomplished this look.

Important Information
When using this shortcode, always make sure to place it after the line of text you are selecting, otherwise it will not work.

Check It Out, I’m Responding!

Code

[custom_headline class="responsive-heading" type="center" level="h2"]Check It Out, I'm Responding![/custom_headline] [responsive_text selector=".responsive-heading" compression="1.5" min_size="36px" max_size="78px"]

Options

  • selector: the selector used to activate the lightbox. Best use comes from adding a class on the links of all images you want to use, for example, “my-lightbox.” Next, you would simply write “.my-lightbox” 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.