Customize Text widget font sizes for different screen sizes in ArcGIS Experience Builder

Summary

In ArcGIS Experience Builder, the font settings of a Text widget remain unchanged across different screen sizes. At times, it is necessary to adjust the font sizes for large, medium, and small screens to ensure readability and optimize performance on all devices.

This article provides two workflows to customize font sizes of the Text widget for different screen sizes in ArcGIS Experience Builder.

Procedure

Follow one of the workarounds below.

Add a new Text widget and move the original widget to the pending list

In ArcGIS Experience Builder, adjusting the font size in one screen view changes the font size in all other screen views. To customize the font size specifically for medium or small screens, add a new Text widget and move the original Text widget to the pending list to retain the widget for other screen views. Then, customize the font size in the new Text widget to improve readability on the smaller screens.

1. Open the ArcGIS Experience Builder web experience.
2. On the top ribbon, click the screen button to edit the page. In this example, the small screen page is configured.
3. On the canvas, click Custom.

4. When prompted, click OK.
5. On the canvas, select the Text widget. On the widget’s toolbar, click Duplicate .
6. Select the original Text widget. On the widget’s toolbar, click Move to the pending list .
7. Select the duplicated Text widget to open the Text panel.
8. On the Text panel, under Text format, specify the font size to optimize the display for the smaller screen sizes.

9. Click Save .

Change the font size by unit

By default, text in the Text widget is formatted using pixels (px), which results in a fixed text size regardless of the screen size. To adjust the text size dynamically for different screen sizes, use the view width (vw) unit. This unit scales the font size relative to the width of the screen and ensures the text remains proportionate to the screen size.

1. Open the ArcGIS Experience Builder web experience.
2. On the large screen page, click the Text widget to open the Text panel.
3. On the Text panel, under Text format, click the Change unit button and select vw from the drop-down list.

4. Click Save .

The image below shows the text size customized for large, medium, and small screen sizes.