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 separate layout is based on adaptive design, where you can create unique designs for large, medium, and small screen sizes. Each layout is an adaption of the experience, which offers 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. To remove a widget or screen group from a small 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 tab in the Insert widget panel.
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.
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.