About responsive layouts
- Last UpdatedJul 15, 2024
- 1 minute read
When configuring a responsive layout, some of the important differences between it and a fixed layout are:
-
In the responsive layout mode, as in the fixed layout mode, you begin with a single pane. However, panes are added to a responsive layout by selecting an Add Pane button. In the fixed layout mode, you add panes by dividing the original pane
-
Different screen sizes are defined in a responsive layout. Panes can be configured to use different numbers of columns for each screen size. For example, a user on a mobile device may be shown content in a pane that takes up the entire width of the screen, while a user on a laptop is shown the same content in a pane that takes only a fraction of the screen width.
-
In the responsive layout mode, you define pane widths by number of columns, not by percentage (or number of pixels) of the the total layout width. A pane can be as wide as 12 columns, or as narrow as one column. A pane that is 12 columns wide takes the full width of the layout. You can set a different number of columns for each of five different screen sizes, from extra small (mobile) to large (desktop).
-
You can configure multiple panes in a side by side arrangement if the total number of columns the panes use is 12 or less. For example, you can have three panes side by side if each pane four columns wide.
See About the responsive layout mode for more information.