Setka Post Editor Responsive layout for mobile screens

Responsive layout for mobile screens

Click here to learn more about creating custom font styles for mobile screens in the Style Manager.

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 eye-like button in the right-hand toolbar or by pressing the TAB button on your keyboard.

Screen_Shot_2019-07-04_at_12.53.49.png

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: mceclip0.png

 

Settings available:

  • color;
  • 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 a same width, in a row), with desktop-like columns (only columns with content will stay visible)
  • Custom CSS field.

Set of mobile available settings depends on selected element.

The content in the editing field of mobile settings will look the same as on mobile devices:

mceclip1.png

 

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: mceclip0.png

 

Potential 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.