Responsive layout for mobile screens
How to preview the content display on mobile devices and adjust design and animation setting for mobile screens.
Last updated
How to preview the content display on mobile devices and adjust design and animation setting for mobile screens.
Last updated
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.
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.
This video shows the Post preview mode in action:
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:
Mobile: 0-767px. The layout is fully customizable via CDSM and the post editor itself.
Tablet: 768-991px. Only text formats can be customized via CDSM. The layout stays the same as the desktop version.
Desktop: 992px and over.
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.
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:
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:
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:
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.
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.
