The position of the control is overridden in the "Mobile" and/or "Tablet" slice: in the browser, overriding the position and size of controls causes them to overlap.
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 is using 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 that groups 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, the size and position of controls 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:
At runtime, there is an overlap, as the order of controls in the "Desktop" and "Mobile" slices is different: the image will overflow on the CELL_2 cell and it cannot "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 simplify the positioning of controls in the "Mobile" and/or "Tablet" blade, from version 21 Update 3, a UI compilation error is systematically generated by the page editor if the order of controls is not respected between the different blades.