Layout Resizer

The layout resizer allows you to easily view how your output and text might look for different screen sizes, and experiment with custom sizes. As you click the controls on the resizing slider or enter a breakpoint to alter the width setting, the content in the editor will dynamically respond.

If you have different styles to display for various mediums or screens (i.e., for a tablet device, or a smart phone), the layout resizer is a convenient way to see those style settings without having to generate output. In the XML Editor, you can also use the layout resizer to create a new media query in the stylesheet based on the position of the layout resizer.

How to Enable and Disable the Layout Resizer

  1. Open a content file. By default, the layout resizer is disabled.

  2. To enable the layout resizer, select the Toggle Layout Resizer button from the editor's bottom toolbar. Alternatively, from the editor's top toolbar Show Tags drop-down, select the Layout Resizer item.

    The slider bar displays at the top of the XML Editor or the Micro Content Editor.

  3. You can disable it, or enable it again at any time.

How to Test Screen Size

You can test resizing content as much as you want in the editor.

  1. Open a content file.

  2. If the layout resizer is not shown at the top of the editor, click in the bottom toolbar.

  3. Hover your cursor on the layout resizer slider. Notice the following:

    • A gray “thumb” (or marker) matches the position of the hand cursor as you hover and move it along the slider. As soon as you click on the slider, a blue thumb marks a temporary position used in the editor. A text box also displays to the right of the slider showing the position of the blue thumb and unit of measurement.

    • Small gray rectangles represent media query breakpoints (you might have to extend the XML Editor to see them). Out of the box, Flare includes a tablet breakpoint at 1279 pixels, and a mobile breakpoint at 767 pixels. If you click the gray thumb to an existing media query rectangle, it snaps into place. As a result, the editor renders content based on the selected media query.

  4. Move the hand cursor along the slider, and click any location on the slider that you might want to see as a resized layout for your content. Alternatively, you can type a temporary position into the text box directly.

Note Marking a temporary position to see what content might look like does not save the layout. You need to save it as a new media query.

Note From the three vertical dots drop-down , you can select Reset Slider to refresh the slider. This hides the two thumbs, and the position and unit of measurement boxes. The Layout Mode does not change, and the content is not resized.

If the animation below is cut off, you can see the complete animation by clicking the link under it to open the full topic.

How to Add a New Media Query From the Layout Resizer

If you decide you like the way the output or text looks after adjusting for different screen sizes and layouts, you can create a new custom media query directly from the slider. See Media Queries.

  1. Open a content file.

  2. Move the hand cursor to a new position on the layout resizer and click.

  3. Click the button with the three vertical dots to the right of the slider , and from the drop-down select Add New Media Query.

  4. The New Medium / Media Query dialog opens with a logical expression based on the max-width cursor position from the layout resizer. You can select a different stylesheet where the media query gets saved. Click OK. (Notice a new gray rectangle appears on the slider indicating your saved media query and breakpoint, and the Stylesheet Editor opens.)

  5. (Optional) In your stylesheet, edit styles for the new media query.

    Note Keep in mind that priority is given to the last media query in the stylesheet (i.e., the one that was added most recently). This means that the order of media queries in the stylesheet affect how max-width queries get applied. See Conflicts With Mediums and Media Queries.

Example You have to generate online output for a device with a small screen. You want to see how the output might look with a narrower width than what the factory mobile media query breakpoint offers (at 767px). One way to do this is to experiment with the width settings on the layout resizer.

You open a topic in the XML Editor. By default, the layout resizer is disabled. From the bottom local toolbar, you can click to enable it. It displays at the top of the editor.

You ensure the top toolbar indicates an online layout. Notice the default mobile media query breakpoint displays as a small gray rectangle on the slider.

You can select a unit of measurement (e.g., pixel, point, centimeter, inch, or em) to gauge your screen size, but you decide to compare it to the mobile breakpoint, and use pixels.

As you move the hand cursor along the slider bar, a gray “thumb” matches the cursor position. You can use the horizontal ruler to help you find an exact location.

Then, click the gray thumb to the slider at about 350px. A blue thumb marks the new position, and the content responds to it. The location is not saved (you can move the blue thumb as much as you want).

You settle on a max-width of 325 px for your small screen size. So, you click the three vertical dots drop-down to the right of the slider, and select Add New Media Query. The new media query saves to your stylesheet.

Notice a new gray rectangle displays on the slider indicating the breakpoint of your media query. (Click anywhere else on the slider to see the new rectangle better.)

In addition, you need the font to be smaller and red for this output. To see how this might look, you can open the new media query in your stylesheet and edit its styles. See Selecting Mediums and Media Queries, and Editing Styles in a Regular Stylesheet.

What’s Noteworthy?

Note A few items about toolbar and slider behavior:

  • The Layout Mode and Medium drop-down selections in the editor’s top toolbar, and the position on the slider work in tandem. For example, if you click the mobile breakpoint, the content is resized to that media query, and the layout mode in the toolbar switches to Layout (Mobile).

  • The Medium drop-down shows all the medium styles that are in effect in the editor. For example, if the mobile layout is displayed, both the mobile and tablet medium styles apply and are selected. If (multiple) is displayed in the Medium drop-down, that is indication that multiple styles are applied. Content in the editor is rendered with all applicable styles (according to the width).

  • If you select from the Medium drop-down a medium other than the default, then the Medium (default) label changes to Reset to Default Medium. If you click to reset, the label goes back to Default Medium with a check mark to show it is selected.

Note Although the layout resizer is a convenient way to resize content or create media queries, there are some things it does not let you do.

  • Once a new media query breakpoint is saved from the slider, it cannot be moved. You can either delete or edit the media query in the Stylesheet Editor or Internal Text Editor.

  • A set default breakpoint (e.g., tablet, or mobile) cannot be adjusted on the slider. The breakpoint determines the point where media queries become active in displaying different style settings. You can edit the default breakpoint value on the Skin Tab of the Target Editor.

Note Use the horizontal ruler in conjunction with the layout resizer feature to help you visually find a position on the slider. Even though the two features function separately, the unit of measurement they employ are always in sync. You can change the unit of measurement by selecting its drop-down on either feature.