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

Click on the Preview post button on the right toolbar before publishing your post. Desktop version of your page is on the left, mobile version is on the right. Desktop/Mobile switcher will appear on the top again 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 options for the grids in mobile layout: Normal, Reverse and Matrix. Normal is a default one. In Normal layout all the columns are arranged vertically in series. Select Reverse to change an order to the opposite (right column is the first). Matrix makes 2 columns out of any number of blocks.

 

 

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

 

Potential issues with your page look on mobile 

Background image

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

Background > Show background on mobile > Off.

 

backround_on_mobile.png

 

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

When embed video with a turned off full width option, it may overflow a column limits on a mobile screen. Turn on a Responsive embed in the Embed tab.

Embed videos with the disabled Responsive embed option on the mobile version will not adapt to the width of the screen. In order to allow the embed video to be stretched in width, set the Embed> Responsive embed tab to On.

 

 

Facebook embed

Sometimes an embedded document may look cropped on mobile. It happens because each content provider sets default size attributes for the document inside an <iframe></iframe> container. In order to keep content proportions upon a resize, an embedded object is cropped. When the Responsive embed mode for an embed is enabled, check a preview page to see how your post looks on a mobile screen.