Changing style attributes at breakpoints

Freeway 7.1 and later offers the ability to change HTML text style attributes at breakpoints in responsive layouts. Often you’ll want text to be larger in larger breakpoints or to align text differently at smaller breakpoints. Using responsive text styling it’s now possible to do this.

There are two ways to make changes to text at different breakpoints.

A quick way is to add an HTML text item at the Default breakpoint and then change the attributes applied to the text at various breakpoints (such as the color or size) by clicking on the respective breakpoint tab then changing it in the Inspector’s General Settings tab. However, doing this will introduce “temporary” text styles into your document which can become difficult to maintain in larger documents. We recommend using an easier to manage workflow where styles are first created in the Edit Styles dialog and then applied to the text you want to style. Doing so means any future changes to the style will automatically updated the text throughout your site.

To do this, go to Edit>Styles, click on the “+” button, leave the Tag field empty, enter a name for the new style in the Name field, then choose the attributes you wish to set. This particular workflow for setting up your styles is discussed in great detail in the Creating Custom CSS Styles in Freeway KnowledgeBase article.



Once you’ve set the default attributes for the style, open the “Properties” popup at the bottom right of the dialog to set the attributes of specific breakpoints. Any changes made in the breakpoints will override the settings in the larger ones. The same responsive rules apply to text styling as they do layouts; styles at larger
breakpoints will
filter down through to the smaller breakpoints. If you change the font
size of a style at the 768 breakpoint to 16px, any text that has the style
applied will be 16px from 768 right down to 320. If you also set it
to 14px at the 480 breakpoint, it will be 16px at 768 and 14px at 480 down to 320. See the Intro to Responsive guide for more details about this flow.

To see a working example, download the attachment at the bottom of this article (responsive-text-sample.freeway.zip).

To see which style attributes can be changed between breakpoints, see the “Styles” section of the What properties can I change between breakpoints in a responsive site? article.

responsive-text-sample.freeway.zip (33.7 KB)