Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • Responsive layout for mobile screens
  • Previewing the content for mobile devices
  • Automatic content adaptation for mobile
  • Breakpoint types
  • Additional mobile settings
  • Available Mobile Settings
  • Disabling animations on mobile devices
  • Elements' visibility for mobile devices
  • Making sure embeds look well on mobile screens
  • Video Embeds
  • Embeds from various sources

Was this helpful?

  1. Setka Editor

Responsive layout for mobile screens

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

PreviousHyphenationNextCustom CSS

Last updated 2 years ago

Was this helpful?

Responsive layout for mobile screens

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

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.

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.

This video shows the Post preview mode in action:

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:

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

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:

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:

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:

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.

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.

Mobile: 0-767px. The layout is fully customizable and the post editor itself.

Tablet: 768-991px. Only text formats can be customized . The layout stays the same as the desktop version.

Content Design System Manager (CDSM)
Video tutorial on how to activate Post Preview mode and Mobile Options mode
Adding video embeds in Setka Editor and Responsive Embed settings in the Upper Toolbar
via CDSM
via CDSM
Preview post button on the Side Toolbar in Setka Editor
Post Preview mode activated in Setka Editor with Desktop and Mobile content view displayed
Mobile options button on the Upper Toolbar in Setka Editor
Mobile Options editing mode activated in Setka Editor
Settings for animations view on mobile in the Animation tab of the Upper Toolbar in Setka Editor
Content Visibility settings in the Upper Toolbar in Setka Editor