This is an option for responsive text using viewport CSS units:
vw, vh, vmax, and vmin.
Viewport units allows you to make your text fit into its container’s width. The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. So when the viewport, (which is the size of the browser window) changes the font size change.
1vw = Equal to 1% of the width of the initial containing block.
1vh = Equal to 1% of the height of the initial containing block.
1vmin = Equal to the smaller of ‘vw’ or ‘vh’
1vmax = Equal to the larger of ‘vw’ or ‘vh’.
Place your text or heading into it's column.
Select it open inspector and copy the class.
For example: span.text-element.text-1
http://i66.tinypic.com/ndjyu9.jpg
Go to Settings and Paste the class into a CSS style in the doc head
http://i63.tinypic.com/16ldwup.jpg
<style>
span.text-element.text-1 { font-size:7vw; }
</style>
span.text-element.text-1 { font-size:7vw; }
</style>
You have to use the browser preview from RSD to see it work.
Try it out using the different options like if you want to go with a minimum of the blocks height & width.
Change 7vw to say 14vmin for example.
A maximum may be 6vmax or to the height only you'd use 5vh
You can also go back to a media query if you want a min size by copy pasting from the RSD code below it inside the style tag the same way like this.
http://i67.tinypic.com/2077420.jpg
<style>
span.text-element.text-1 { font-size:7vw; }
@media screen and (max-width: 31.75em) {
span.text-element.text-1 {
font-size: 3.375em;
}
}
</style>
Browser Support with CSS viewport units: http://caniuse.com/#feat=viewport-units
