Responsive layout for mobile screens
How to preview the content display on mobile devices and adjust design and animation setting for mobile screens.
Click here to learn more about creating custom font styles for mobile screens in the Content Design System Manager (CDSM).
While working with your content, you can check how it will look on desktop and mobile. Preview mode opens if you click the Preview Post button on the Side toolbar (with the eye icon) or pressing the TAB key.
Preview post button on the Side Toolbar in Setka Editor
The Desktop/Mobile switch will appear at the top as you expand or shrink the browser window. You can play around with screen dimensions to observe how the grid handles various views and windows. Please note that mobile breakpoints for Setka Editor content are 0-767px.
Post Preview mode activated in Setka Editor with Desktop and Mobile content view displayed
This video shows the Post preview mode in action:
Video tutorial on how to activate Post Preview mode and Mobile Options mode
Content created in Setka Editor becomes ready for mobile screens automatically, and you can see how it looks in the Post preview.
The grid automatically adapts to mobile screens: on narrowing down the screen, columns consistently align vertically. Wide images and responsive embeds shrink to fit the width of the mobile screen.
10px margins are added to a post automatically to prevent the content from sticking to a mobile screen's edges.
Setka Editor posts use 3 to switch layouts from desktop to mobile:
If automatic adaptation is insufficient, you can get more flexibility in additional mobile settings. You can switch to mobile settings by pressing the Mobile Options button in the Upper Toolbar.
Mobile options button on the Upper Toolbar in Setka Editor
- color
- background
- bottom indent
- inner indent
- align (horizontal and vertical)
- view of tables: with horizontal scroll, as a list (columns become strings), cards with or without scroll
- view of grids:
- default (columns align horizontally, one after another),
- default reverse (reversed columns order),
- 50/50 (2 columns of the same width, in a row),
- columns (with desktop-like columns, only columns with content will stay visible)
- Custom CSS field
The set of mobile available settings depends on the selected element.
The content in the editing field of mobile settings will look the same as on mobile devices:
Mobile Options editing mode activated in Setka Editor
If some animations look out of place in a mobile layout, they can be turned off for each specific element, in the Animation menu on the Upper Toolbar:
Settings for animations view on mobile in the Animation tab of the Upper Toolbar in Setka Editor
If you do not want any of the post elements to be visible in your post's mobile version, you can disable it for mobile devices. To do that, press Mobile Options in the Upper Toolbar, select the element you want to hide, and press Visibility => Desktop only:
Content Visibility settings in the Upper Toolbar in Setka Editor
You can also set that some post elements will be visible for the mobile version only using the same menu. This can be useful for entirely different mobile and desktop layouts when you can create a post part for desktop visibility and then recreate it for the mobile version.
Embedded videos may extend beyond column limits on mobile screens. Turn on the Responsive Embed mode to easily adjust the size of the video for mobile screen limitations. To do so, click on the video and in the embed tab, set Responsive Embed to On.
Adding video embeds in Setka Editor and Responsive Embed settings in the Upper Toolbar
Sometimes an embedded document may look cropped on mobile. This happens because each content provider sets default size attributes for the document inside a container. When the Responsive Embed is enabled, check the Preview Post mode to see how your content looks on mobile.
Last modified 1yr ago