Setka Post Editor Responsive layout for mobile screens

Responsive layout for mobile screens

Learn more about creating custom font styles for mobile screens in Style Manager.

Click Preview post in the right hand toolbar to view your post. The desktop version of your page is on the left and the mobile version is on the right.

Desktop/Mobile switcher will appear at the top as you start changing the window width. You can play around with the screen dimensions to see how the grid handles various viewports.

 

 

There are three layout options for grids in mobile layout: Normal, Reverse and Matrix. Normal is selected by default: this arranges columns from left to right vertically. Select Reverse to switch the order (from right to left vertically). Matrix makes 2 columns out of any number of blocks.

 

 

A 10px padding from left and right is set as default for mobile using any grid system.

 

Potential issues with your page look on mobile 

Background image

If a background image is stretched across a post or a column in the desktop version, it may look oversized on mobile. You can turn off background image for mobile screen in the Post tab:

Background > Show background on mobile > Off.

 

backround_on_mobile.png

 

Be careful when turning off background images under text with the same color as the page, as it will be invisible on mobile.

Embedded videos may overflow column limits on a mobile screen. Turn on responsive embed to adjust the size of the video to the mobile screen limits. 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.