The ArcGIS Experience Builder widget size and position do not adjust according to the screen size

Description

In ArcGIS Experience Builder, widgets' size and position are not adjusted when changing the screen size to preview a web experience. The image below displays the web experience with disarranged widgets when the screen size is changed.

Cause

This occurs when the size and position of all or some widgets in a web experience are configured using absolute values in pixels (px). Using absolute values does not proportionately position the widgets relative to the screen size.

Solution or Workaround

To proportionately display the widgets, configure all of the widget's size and position in percentage (%). If some of them use pixels (px) the behavior can still occur.

Follow the steps below to do so.

1. Open the ArcGIS Experience Builder web experience.
2. On the canvas, click the widget to configure the style. The Table widget is used in this example.
3. In the Table widget configuration panel, click the Style tab.
4. Change the unit from px to %.
   1. Under the Size & Position section, for Width, click px and select % from the drop-down list.
   2. Under the Size & Position section, for Height, click px and select % from the drop-down list. Alternatively, click Keep aspect ratio to keep the widget's width and height ratio.
   3. Under the Size & Position section, for the widget's position, change the unit to %.

5. Repeat Steps 2 through 4 for all widgets in the web experience.
6. Click Save to save the configurations.
7. Click Preview to preview the web experience.

The image below shows the web experience with widgets displayed proportionately to the screen size.