Responsive layout for mobile screens

How to preview the content display on mobile devices and adjust design and animation setting for mobile screens.

Responsive layout for mobile screens

Click here to learn more about creating custom font styles for mobile screens in the Content Design System Manager (CDSM).

Previewing the content for mobile devices

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

Automatic content adaptation for mobile

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.

Breakpoint types

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.

Additional mobile settings

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

Available Mobile Settings

• 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

Disabling animations 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:

Settings for animations view on mobile in the Animation tab of the Upper Toolbar in Setka Editor

Elements' visibility for mobile devices

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.

Making sure embeds look well on mobile screens

Video Embeds

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

Embeds from various sources

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.