Understanding the Size controls can help you customize responsive behavior and layout designs

The power of a Flow page is that your content layout can switch from horizontal to vertical at different breakpoints. This means you can create experiences that better-serve your learners across different devices and browser widths. 

Of course, if you're using Flow already, you already know this.

What’s less-known is how this switch from horizontal to vertical is actually carried out. And understanding this can open up a range of control over responsive layout behavior as well as layout design options for you.

In a Flow page, Elements and Groups both have a Size option.

This sets their width as a ratio of the container they are in.

The Size setting in conjunction with the Page “gravity” is what tells the Row to respond and re-arrange itself from a horizontal layout at wide display widths to a vertical layout in narrower screen widths. 

Here’s an example of how that works.

Here’s an example of how that works.

In Flow, width is measured in 12ths.  You can think of a Row, for example, as having up to 12 columns in its width.

If the Row has two Groups in it arranged horizontally and they’re each half the width of the Row then each of the groups’ width is set to be 6/12ths of the available width in the Row.

A size in widths can be set for each of the Breakpoints. 

You can see this using the Size tool. In this example, we have two Groups in the same Row:

  • Body Text Group
  • Tabset Group

At the Medium breakpoint we’ve selected the Body Text Group then selected its Size option. 

You can see below that for the three widest breakpoints the Group’s size is set to be 6/12ths of the available Row width. But for the Extra Small Breakpoint, the width is set to be 12/12ths, or the full width of the Row. (And if you selected the Tabset Group you would see that it has the same settings on its Size panel.)


At the three widest Breakpoints, each group is set to 6/12ths wide.

Since 6+6=12, there is space available in the Row’s width for them to sit beside each other horizontally in the Row. (Another way to describe this is that together they fill the full 12/12ths available in the Row so they fit beside each other in that available width.)

At the Extra Small Breakpoint, the Body Text Group is now set to be 12/12ths, so there is no space available for the Tabset Group to sit beside it in the Row.

As a result, the Tabset Group gets pushed down below the Body Text Group, creating a vertical layout. And the Body Text Group is also set to be 12/12ths at the Extra Small Breakpoint, so it also fills the full width of the Row.


This example uses the Group Size controls to control responsive behavior within the Row. 

The same strategy also applies to Groups that have more than one Element in them as well as within Engage Components like Tabsets, Accordion Menus, Content Carousels, etc.

When Do I Use the Size Controls?

Most of the time, you won’t need to do anything with the Size settings. The default Layouts are set up with sensible responsive behaviors.

You’ll typically only need to use the Size Controls when you want to customize the default responsive behavior or use them to help you create unique content layouts.

Here are some examples.

Adjust the Default Display Ratios

Sometimes the default layouts aren't perfect. In this example, the default layout had two groups set at 6/12ths for its horizontal layouts.

We're leaving the right-side Group empty so the woman in the background image isn't covered.

This means we can give the left-side group a bit more width by adjusting it to 7/12ths.   

In-setting Content

If you don’t want to have content display at the full width of the page, you can use the size controls to adjust this.

On the Size Control panel the red left-side handle can be moved to adjust how much to inset the Group.

Custom Layout Designs

In this example we wanted to create a menu at the top of the page with six icons. 

We started with a single-column section and we added the first icon. We then added five more elements in the Group and set the width of all Elements to be 2/12ths.

This lesson explains how to add more Elements to a Group:

Adding additional elements to a Group >>

  0     0

Similar Projects

Questions  ( 0 )