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 the post, you can check how it will look on desktop and mobile. Preview mode opens on an eye-like button in the right-hand toolbar or by pressing the TAB button on your keyboard.

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.

 

  

Automatic content adaptation for mobile

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.

Automatic adaptation is useful if frequent post releases are needed, with no extra time for editing mobile layouts.

10px margins are added to a post automatically, to prevent the content from sticking to the edges of a mobile screen.

Additional mobile settings

If automatic adaptation is insufficient, you can get more flexibility in additional mobile settings.

You can switch to mobile settings on the top bar: 

 

Settings available:

• 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), 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:

 

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: 

 

Elements' visibility for mobile devices

If you do not want any of the post elements to be visible in a mobile version of your post, you can disable it for mobile devices. To do that select the needed element and press ▼ in the upper panel. Find Visibility => desktop only:

 

You can as well remain post elements visible for mobile version only on the same menu. This can be useful for completely different mobile and desktop layouts when you can create a post part for desktop visibility and then recreate it for the mobile version.

 

Possible issues with the mobile version of your post

Embedded Videos

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, just click on the video and in the embed tab, set Responsive Embed to On.

 

 

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 an <iframe></iframe> container. When the Responsive Embed is enabled, check the Preview Page to see how your post looks on mobile.