At this point, there is no responsive text feature in Freeway 7 - but that doesn’t mean that you can’t resize text at breakpoints.
Download example document.
There are two different methods that come to mind. Either you can use Freeway’s extended dialog to change the font size at the breakpoints on a per-HTML item basis, or you hand-code a bit of CSS. Neither of them are too difficult to do, but they each have their own set of limitations.
Using the extended dialog
The extended dialog is one of the most empowering corners of Freeway, and we can use it to make some text responsive.
The first thing that you need to know is that any text style that you are using that sets the size of the text needs to be applied to a HTML item that contains the text, not to the text itself. In other words, you can’t highlight text and apply the style that way, the style needs to instead be added to the parent HTML item.
Now, once you have that done, it’s time to make it responsive. First, activate the breakpoint you want to resize the text at. Now, right-click on the HTML item that contains the text, and in the menu click Extended. Hop over to the <div style> tab. Add this entry:
| Name | Value |
| - - | - - |
| font-size | 20px |
Of course, change 20px to whatever you want it to be. This can even be a em value if you roll that way.
Preview the site in your browser and shrink the window. You should see the font size shrink when you hit that point.
The biggest limitation with this method is that it can’t be applied globally (unless you are doing it to a master page). It will only change the font size of the element that you have it applied to. Also, styles must be added to the HTML container, not the text itself, or your extended value won’t override it at the breakpoint.
Using custom CSS
Using your own CSS to adjust font-size is easier than you would think.
First, apply your text style however you would like to in Freeway. Jot down the name of the style, you will need it in a second.
Now, we need to write the CSS. In Freeway’s menubar, go to Page > HTML Markup… > Before </head>. If you want to font size adjustment to be global, you will need to do this on a master page.
Paste this in:
<style>
/* 1100px breakpoint */
@media screen and (max-width:1000px) {
.mystyle { font-size: 30px; }
}
/* 768px breakpoint */
@media screen and (max-width:768px) {
.mystyle { font-size: 20px; }
}
</style>
Some things to note:
- Change
.text to the name of the text style in Freeway that you want to adjust, of course, keeping the dot prefix.
- Tweak the breakpoint sizes to suite what you want - and even add your own, but just make sure that the breakpoints are sorted in descending size (so the larger breakpoints should be first).
- Of course, change the font-size.
The nice think about this setup is that any text on the page that uses the mystyle style will obey your custom font sizes, and if you do this to a master page, any text across your site that uses the style.
End Notes
Which method you choose is up to you. As a rule of thumb, the first method is best if you are just trying the change the font size of one unique element in your website (like a bit of huge text on the homepage), while the latter method is far better if you need to adjust the size of large amounts of text across the website.
Of course, there are nicer, prettier ways of doing this (relative font size units like em), but I find that the above methods are the most Freeway and noob friendly. Once you are comfortable changing pixel-based dimensions, look into using the more advanced techniques - they can be really nice and easy once you understand them.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
