ArcGIS Experience Builder allows you to configure and create different page layouts for your web experiences so they perform well on all screen sizes. The configuration of each layout is based on adaptive design, in which you can create unique designs for large, medium, and small screen sizes. Each layout is an adaption of the experience, which provides greater flexibility for more app customization and better use of screen size and different content.
The templates are built to work with multiple screen sizes. When you select a blank full-screen app or blank scrolling page template, they have the Auto layout enabled for medium- and small-screen devices. This keeps all widgets synchronized with the widgets in the layout for the large-screen device and also arranges them automatically.
To create a separate layout for a medium- or small-screen device, click the Custom button next to the layout of the page or window. Then you can manually arrange and resize widgets and windows for the selected screen device.
When you edit layouts for small-screen devices, the following large configuration panels that otherwise appear on the canvas instead appear in the builder margins:
- The Quick style panel from the Button, Divider, and Views Navigation widgets
- The Dynamic content panel
- The Add widget panel from the Placeholder and Grid widgets
- The Select template panels for pages, headers, footers, windows, blocks, and grids
Tip:
To test the layouts for the different screen sizes and devices, click Live view on the builder toolbar. Live view allows you to confirm that the content is adapted properly before you save and publish the content. You can also experiment by adjusting some settings and manipulating the interactive and dynamic widgets to see how they'll work.
The pending list
To remove a widget or screen group from a device layout, click the Move to the pending list button 
on its toolbar. This removes the widget or screen group from the canvas of the current device and saves its configuration in case you need to add it back to the layout. Once
you enable the custom layout option, if any other widgets are added to other
device modes, they aren't added to the current device. You can manually add them from the pending list.
Note:
Widgets in the pending list save most of their settings, including all content settings, their own style settings such as background and border, and all action settings. Widgets do not keep overall layout settings from the Style tab, such as size and position settings.
The pending list appears on the Pending tab in the Insert widget panel. Widgets that are in the app in at least one device mode appear in a list under Other devices used. The following icons indicate which device modes have each widget:
—Used on large- and medium-screen devices.
—Used on large- and small-screen devices.
—Used on medium- and small-screen devices.
—Used on large-screen devices.
—Used on medium-screen devices.
—Used on small-screen devices.
Widgets that are currently not on the canvas in any device mode appear under All devices unused. Click Delete to remove these widgets from the pending list.
Message actions and the pending list
Widgets that you move to the pending list cannot be the targets of message actions.
When you add message actions on the Action tab of a widget's settings, any widgets on the pending list are not listed as available targets.
If you move a widget that is already the target of a message action to the pending list, that message action is turned off only for the device modes where you moved the widget to the pending list. Icons appear on the Action tab of the source widget's settings that indicate the device mode where the action is configured and active.
In express mode, you can only view message actions for the current device mode layout you are viewing.
Tip:
To learn more about the Experience Builder mobile optimization settings, try the Optimize an app layout for mobile tutorial.
Best practices for designing responsive layouts
When designing layouts for your experiences, consider the following best practices:
- Choose an appropriate layout type.
- Fixed layouts are appropriate if you want elements to remain in place and not flow based on content size. They are appropriate for dashboard designs and modal dialogs.
- Flow layouts allow content to automatically stack and shift based on screen size. They are best for responsive, scrollable content such as long pages with a lot of text, images, and maps.
- Layout widgets including the Row, Column, and Grid widgets are appropriate for complex structured layouts. Each of these widgets allows for flexible placement and alignment of widgets in a container.
- Understand options for setting size and position and apply them strategically.
- Pixels (px) are best when you want precise size, such as with headers, footers, and other elements that must remain the same size across different screen sizes. This is an appropriate unit for elements in desktop layouts and fixed-size elements.
- Percentage (%) is best when you want height and width to be responsive relative to parent containers. Using percentage gives your elements flexibility across different screen sizes. This is an appropriate unit for adaptive screen sizes that scale on tablets and phones.
- Auto allows Experience Builder to decide the size and position of widgets based on their content. It is appropriate for dynamic text or images where the amount of space needed to fit the content may change. Use Auto if you expect the size of an element to vary.
- Stretch makes an element fill its entire container space. It is appropriate for background images, maps, and any other content that must fully occupy available space. Be cautious using this option with small-screen layouts. Stretching many widgets can overwhelm small screens.
- Start with the large-screen layout, then work on smaller layouts.
- After you make a large-screen layout, use the device mode tool to view it on medium- and small-screen devices.
- If needed, use the Custom layout option to change the layout for medium- and small-screen devices.
- Auto layouts sync elements across screen sizes but may not handle complex widget arrangements well.
- Custom layouts allow you to reposition, hide, or resize widgets to make them more usable on smaller screens.
- Maintain layout consistency.
- Use consistent spacing and alignment to create a visually cohesive experience.
- Apply uniform font styles, colors, and widget padding and gaps across layouts.
- Configure headers and footers using the Header and Footer tools in page settings so they behave consistently across pages.
- Preview and test.
- Use the Live view tool to test your layout in the builder.
- Use the Preview tool to preview your app in a browser window. You can resize the browser window to preview your app on different screen sizes.
- On small screens, ensure that elements do not overflow or overlap, widgets are usable and legible, and scrollable regions do not block critical navigation or buttons.