Introduction
Adjusting the workspace for optimal viewing on different devices (mobile and desktop) is essential.
Work area
You can change the size of the workspace to view and edit the mobile version of the content. To do this, click on the mobile icon above the content being edited.
Lines
The default behaviour for displaying lines is as follows:
- Each line of content is displayed on mobile and desktop;
- The columns in the row go one below the other on mobile.
- Nested lines pass one below the other in mobile version.
You can edit these settings by accessing the edit settings by clicking on the pencil icon corresponding to the row in question.
Line parameters
"Show only on" option:
- Mobile: the line is displayed only on mobile;
- Desktop: the line is displayed only on desktop.
Note:
- By default, and when you change the workspace sizing, you only view the lines that should appear on the mobile version or the desktop version.
- If you wish to display all lines on mobile and desktop versions, regardless of the display options chosen, uncheck the "Hide desktop/mobile elements) option offered from the Settings button.
"Adaptive column behaviour on mobile" option:
- Enabled (default option): the columns in the row pass one below the other in the mobile version;
- Deactivated: the columns in the row remain side by side in the mobile version (same behaviour as in the desktop version).
Beware, this option cannot be disabled if column widths are defined in pixels.
Adaptive behaviour of columns disable on mobile
Adaptive behaviour of columns enable on mobile
Image
The 100% width on mobile option allows you to force an image to take on the maximum width of the device when the content is read on mobile, while the image takes on a custom size in the desktop version.
The option can be accessed from the Content tab, by editing the image component. It is disabled by default.
100% width on mobile disable
100% width on mobile enable
Conclusion
The flexibility offered by the display and adaptability options for rows and columns highlights the importance of responsive design for web content.