Responsive Layouts

Styles and media queries can be used to make your content responsive in HTML5 output. This lets you present information—both its substance and structure—differently depending on the size of the screen or device. Flare provides a Responsive Layout window pane that helps you create this kind of content more easily. You also have the option of using third-party solutions (e.g., Zurb Foundation grid system) by adding the appropriate styles in your stylesheets and topics.

System Options

Process

  1. Creating Responsive Layouts
  2. Editing Responsive Layouts
  3. Viewing Responsive Output

System Options

Process

  1. Creating Responsive Layouts
  2. Editing Responsive Layouts
  3. Viewing Responsive Output

Example You have a topic that looks as follows when viewed on a large monitor or on a tablet-sized screen. Notice the three images at the bottom of the topic.

But when the browser is reduced to a mobile size, the images shift so that they display one on top of the other.