Responsive Layout

Last update: February 10, 2025

CREATED FOR:

  • User

AEM lets you have a responsive layout for your pages by using the Layout Container component.

TIP
This document provides an overview of the features of the Layout Container available to content authors. Additional resources are available:

Overview

The Layout Container component provides a paragraph system that lets you position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format. The component is used in conjunction with the Layout mode, which lets you create and edit your responsive layout dependent on device.

The layout container:

  • Provides horizontal snap to grid, together with the ability to place components into the grid side-by-side and define when they should collapse/reflow.
  • Uses pre-defined breakpoints (for example, for phone, tablet, and so on) to allow you to define the required behavior of content for related devices/orientation.
    • For example, you can customize the component size or whether the component can be seen on specific devices.
  • Can be nested to allow column control.

The user can then see how the content is rendered for specific devices using the emulator.

AEM realizes responsive layout for your pages using a combination of mechanisms:

  • Layout Container component

    This component is available in the component browser and provides a grid-paragraph system to allow you to add and position components within a responsive grid. It can also be set as the default paragraph system on your page.

  • Layout Mode

    Once the layout container is positioned on your page you can use the Layout mode to position content within the responsive grid.

  • Emulator
    This lets you create and edit responsive websites that rearrange the layout according to device/window size by resizing components interactively. The user can then see how the content is rendered using the emulator.

With these responsive grid mechanisms you can:

  • Use breakpoints to define differing content layouts based on device width (related to device type and orientation).
  • Use these same breakpoints and content layouts to ensure that your content is responsive to the size of the browser window on the desktop.
  • Use horizontal snap to grid allowing you to place components in the grid, resize as required, and define when they should collapse/reflow to be side-by-side or above/below.
  • Hide components for specific device layouts.
  • Realize column control.

Depending on your project, the Layout Container might be used as the default paragraph system for your pages or as a component available to be added to your page by way of the component browser (or both).

NOTE
Use of the above mechanisms is enabled by configuration on the template. Please see the document Configuring Responsive Layout for further information.

Layout Definitions, Device Emulation, and Breakpoints

When you are creating your website content you want to ensure that your content is displayed appropriate to the device being used to view it.

AEM lets you define layouts dependent on the width of the device:

  • The emulator enables you to emulate these layouts on a range of devices. In addition to the device type, the orientation, selected by the Rotate device option, can impact the breakpoint selected as the width changes.

  • Breakpoints are the points which separate the layout definitions.

    • They effectively define the maximum width (in pixels) of any device using a specific layout.
    • The breakpoints are usually valid for a selection of devices, dependent on the width of their displays.
    • The range of a breakpoint extends left until the next breakpoint.
    • You cannot select the breakpoint specifically, selecting a device and orientation will automatically select the appropriate breakpoint.

The device Desktop, which does not have a specific width, relates to the default breakpoint (that is, everything above the last configured breakpoint).

NOTE
It would be possible to define breakpoints for every individual device, but this would drastically increase the effort required for layout definition and maintenance.

When using the emulator, you select a specific device for emulation and layout definition and the related breakpoint is highlighted too. Any layout changes that you make are applicable for other devices to which the breakpoint applies. That is, any devices positioned to the left of the active breakpoint marker, but before the next breakpoint marker.

For example, when you select the device iPhone 6 Plus (defined with a width of 540 pixels) for emulation and layout, the breakpoint Phone (defined as 768 pixels) is activated too. Any layout changes you make for the iPhone 6 are applicable to other devices under the Phones breakpoint, such as iPhone 5 (defined as 320 pixels).

Emulators

Selecting a Device to Emulate

  1. Open the required page for editing. For example:

    http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html

  2. Select the Emulator icon from the top toolbar:

    Emulator button

  3. The emulator toolbar opens.

    Emulator toolbar

    The emulator toolbar displays additional layout options:

    • Rotate device - Lets you rotate a device from vertical (portrait) orientation to horizontal (landscape) orientation and conversely.

    Rotate device landscape button
    Rotate device portrait button

    • Select Device - Define a specific device to emulate from a list (see next step for details)

    Select Device button

  4. To select a specific device to emulate you can either:

    • Use the Select Device icon and select from a drop-down selector.
    • Select the device indicator in the emulator toolbar.

    Select device dropdown

  5. Once a specific device has been selected you can:

    • See the active marker for the selected device, such as iPad.
    • See the active marker for the appropriate breakpoint such as Tablet.
    • The blue dotted line represents the fold for the selected device (here an iPhone 6 Plus in landscape).

    The fold

    • The fold can also be considered the page line break (not to be confused with the breakpoints) for the content. This is displayed for convenience to show what part of the content the user sees on the device before scrolling.
    • The line for the fold is not shown if the height of the device being emulated is higher than the screen size.
    • The fold is shown for the author’s convenience and is not shown on the published page.

Adding a Layout Container and its Content (Edit mode)

A Layout Container is a paragraph system that:

  • Contains other components.
  • Defines the layout.
  • Responds to changes.
NOTE
If not already available, the Layout Container must be explicitly activated for a paragraph system/page.

  1. The Layout Container is available as a standard component in the Components Browser. From here you can drag it to the required location on the page after which you can see the Drag Components here placeholder.

  2. You can then add components to the layout container. These components will hold the actual content:

    Layout container

Selecting and Taking Action on a Layout Container (Edit mode)

As with other components, you can select and then act on (cut, copy, delete) a Layout Container (when in Edit mode):

CAUTION
As a layout container is a paragraph system, deleting the component will delete both the layout grid and all the components (and their content) held within the container.

  1. If you mouse over or select the grid placeholder, the action menu is displayed.

    Add to the layout container

    You need to select the Parent option.

    Parent button

  2. If the layout component is nested, selecting the Parent option presents a drop-down selection, letting you to select the nested layout container or its parents.

    When you mouse over the container names in the drop-down, their outlines are displayed on the page.

    • The lowest nested layout container is outlined in blue.
    • Every successive container is outlined a lighter shade of blue.

    Nested containers

  3. The entire grid is highlighted with its content. The action toolbar is shown, from where you can select an action such as Delete.