The position of a field is overridden in the "Mobile" and/or "Tablet" slice: in the browser, this position and size override causes fields to be superimposed.
What is the problem? Overriding the position in the "Mobile" and/or "Tablet" slice changes the order of controls defined in the "Desktop" slice (which is used as reference slice in "Desktop First" mode).
In "Responsive Web Design" mode, the controls are organized in relation to the other ones. This order depends on the position (from top to bottom then from left to right) and on the anchor. It must be exactly the same in all slices.
Indeed, the "Responsive Web Design" technology uses a single HTML stream for all the slices, while repositioning the controls by CSS. The order of controls in the reference slice defines the order of controls in the HTML stream.
Example: In the following example, the page contains a cell grouping together another cell and an image:
The order of controls in the "Desktop" slice (the reference slice) is:
- the CELL_1 cell that groups the second CELL_2 cell and the image,
- the CELL_2 cell,
- the image.
In the "Mobile" slice, field size and position are overridden: the image is placed before the CELL_2 cell.. The order of controls in the "Mobile" slice is different from the order of controls in the "Desktop" slice:
In execution, as the order of the fields in the "Office" slice is not respected in the "Mobile" slice, there is an overlay: the image will overflow onto the CELL_2 cell and it will not be able to "push" it:
To avoid any unexpected overlap in the browser, make sure that the order of controls in the "Mobile" and"Tablet" slices is the same as the order of controls in the "Desktop" slice (reference slice).
In our example, to get the expected result, you have the ability to use two Image controls:
- The first Image control will be placed before the CELL_2 control in the Desktop slice (therefore, it will be first in the order of controls in the reference slice). It will be visible in the "Mobile" slice only.
- The second Image control will be visible in the "Desktop" slice only.
To facilitate the positioning of fields in the "Mobile" and/or "Tablet" slice, from version 21 Update 3 onwards, a UI compilation error is systematically generated by the page editor if the order of fields between the different slices is not respected.