Open the experience
You’ll start by opening the experience that was created in the earlier tutorial.
- If you completed the previous tutorial, Add a window to a web app, reopen your American River Marine Estuary experience and skip to the next section.
Note:
If you don’t know how to find the experience, open ArcGIS Experience Builder and sign in with your ArcGIS account. Your experience will be listed on the Recent experiences page.
- If you did not complete the previous tutorial, open ArcGIS Experience Builder and sign in with your ArcGIS account.
Note:
If you don't have an ArcGIS account, see options for software access.
The Recent experiences page appears.
- Click the Create new button.
- Click the ArcGIS Online tab.
- In the search bar, type estuary tutorial template 3.
- On the American River Marine Estuary Tutorial Template 3 card, click the Create button.
The canvas appears, showing the experience created so far. It includes a map, a header, a column with more widgets, and a button that opens a window.
- On the builder toolbar, click the title and rename it American River Marine Estuary.
Enable the custom layout option
The American River Marine Estuary experience is intended for an interactive kiosk, so your design has focused on a large screen format. However, your client has indicated that they also want to link to the app from their website, so users may also encounter it on tablets and mobile phones. You’ll use the custom layout option to make adjustments to the layout that will only be visible on smaller screens.
- On the builder toolbar, click the Edit your page for medium screen devices button.
The canvas becomes narrower, emulating the screen of a tablet device. The column next to the map is now too narrow to be useful. You can’t read any of the content in the widgets.
Next to the menu, there are two state menus: one for the header and one for the body of the map. They are both set to Auto, meaning the layout for medium screens is the same as the layout for large screens.
- Next to the body of the app, click Custom.
- In the Are you sure you want to enable it window, click OK.
Now you can change the layout design for the page on medium screens without affecting the design for large screens.
- Click the column. Try to click the space between two widgets to select the column instead of one of the other widgets.
Tip:
To confirm that you’ve selected the column widget, check that the Column pane has appeared. You can also select the column widget in the Outline section of the Page pane.
- Drag the side handle of the column widget to the right until it takes up four vertical spaces instead of two.
The column is now wide enough to fully show the legend. This change won’t affect the experience on large screens.
Move an item to the pending list
Sometimes, you want to remove a widget entirely from a small screen layout. Instead of deleting the widget, which would remove it from the large screen layout as well, you can move it to the pending list.
- On the builder toolbar, click the Edit your page for small screen devices button.
The canvas becomes even smaller. The changes needed here are more dramatic.
- On the canvas, scroll through the app.
The column is shown first, with the map underneath. On smalls screens, row widgets are displayed as columns, so your layout is now structured as a column inside a column instead of a column inside a row.
Mobile apps have less space, so are more successful when they are kept simple. The information in the legend and bookmark widgets is also available in the pop-ups, so you’ll remove the widgets from view on small screens. The swipe feature is also less useful on a small screen, so you’ll remove it too. This means you can remove the entire column widget, leaving only the map.
- Next to the body of the canvas, click Custom. Click OK.
- Select the column widget. Ensure that the column is selected, not one of the widgets inside of it.
Do not delete the column widget. Deleting a widget in custom mode will delete it from the entire app, so it will no longer be available on larger screens either. Instead of deleting widgets from a medium or small screen layout, move them to the pending list. This will ensure that they still exist and are available for other screen sizes.
Tip:
If you accidentally deleted the column widget, on the toolbar, click the Undo button.
- On the widget’s toolbar, click the Move to the pending list button.
The column and all of its contents disappear from the canvas. Only the map remains.
Note:
If the map does not fill the entire canvas, click and drag it a small amount to reset its size.
If the map tools (for example, the switch map button) are not visible at the bottom of the canvas, open the Map pane to the Style tab. For Height, choose Custom and set the size to 100%.
Set size and position with pixels
Creating custom layouts for smaller screens has a drawback: if you decide to make changes to the layout afterward, you must make them two or three times. Sometimes, you can avoid enabling a custom layout by sizing things with pixels instead of percentages.
On small screens, the About this map button on your experience is not large enough to show all of its text.

You could make a custom size for the button that only affects small screens, but instead you’ll change the general size of the button so it works on all screen sizes and no customization is needed.
- On the builder toolbar, click the Edit your page for large screen devices button.
- Point to the header and click Edit header. Click the button widget.
- In the Button 2 pane, click the Style tab.
Under Size & Position, the Width and Height settings are both measured as a percentage of the screen size. This is why the button becomes too short to read on small screen devices.
- Next to Width, click the % button and choose px. Change % to px for the Height setting as well.
Determining the button’s size with pixels will mean that the button is always the same size, regardless of the screen size.
- For Width, type 120. For Height, type 30.
The button looks a little small for large screens, and it will still look a little big for small screens. But its new size is a compromise that works on any size screen. You’ll also determine its position in pixels.
Below the Height parameter, there is a position diagram. This diagram determines how far from the edges of the header the button is placed.
- In the position diagram, next to the bottom and the right position measurements, click the % button and choose px.
- Change both measurements to 10 pixels.
The button is now positioned 10 pixels from the bottom right corner of the header.
Next, you’ll adjust the position of the title text so it is also 10 pixels from the edge.
- On the canvas, click the title text.
In the Text pane, on the Style tab, in the position diagram, all four measurements are set to 0 percent. This is because you configured the title to fill the entire space of the header. You’ll adjust one of these measurements.
- In the position diagram, change the left measurement to 10 pixels.
On the canvas, the text widget shifts slightly to the right.
- Click the Edit your page for medium screen devices and Edit your page for small screen devices buttons to test how the header appears on smaller screens.
- On the builder toolbar, click the Edit your page for large screen devices button and the Save button.
In this tutorial, you adapted your layout to work on three screen sizes. You enabled the custom layout option, moved unwanted items to the pending list, and set the size and position of widgets using pixels to ensure they do not resize as the screen size changes. Try the last tutorial in this series, Publish an experience and a template, to learn how to make the experience available to the public.