О возможностях настройки стилей поста для мобильных устройств вы можете узнать в разделе Управление дизайн системой.

 

Предросмотр контента на мобильных устройствах

Работая с постом, вы можете посмотреть, как он будет выглядеть на десктопе и на мобильных устройствах. Режим просмотра поста открывается по нажатию на иконку "глаз" в правой панели инструментов или нажатию клавиши TAB.

 

Автоматическая адаптация контента для мобильных устройств

Сетка поста адаптируется под мобильные устройства автоматически: при уменьшении ширины экрана, колонки сетки последовательно выстраиваются по вертикали. Большие изображения и эмбеды в режиме responsive, ужимаются по ширине мобильного поста.

Автоматическая адаптация контента полезна, когда нужно выпускать посты, не тратя дополнительное время на мобильную вёрстку.

Чтобы контент поста не прилипал к краям мобильного браузера, к нему автоматически добавляется отступ в 10px с обеих сторон контейнера поста.

 

Брейкпоинты в контенте Setka

 

Дополнительные настройки мобильного отображения контента

Если автоматической адаптации недостаточно, получить больше гибкости в управлении мобильной версией, можно с помощью дополнительных мобильных настроек.

Переключение в режим мобильных настроек происходит в верхней панели редактора:

Доступные настройки:

• Цвет
• Фон
• Нижний отступ
• Внутренний отступ
• Выравнивание (горизонтальное и вертикальное)
• Отображение таблиц: с горизонтальной прокруткой, списком (когда колонки таблицы становятся строками), карточками со скроллом и карточками без скролла.
• Отображение сеток: обычное (когда колонки сеток идут одна за другой), обратное (меняется порядок колонок), 50/50 (2 колонки одинаковой ширины, в ряд), с сохранением колонок (останутся только колонки, содержащие контент).
• Поле кастомного CSS.

Набор мобильных настроек в верхней панели зависит от выбранного элемента.

В режиме мобильных настроек, в поле редактирования, контент будет выглядеть так же, как на мобильных устройствах:

 

Выключение анимации на мобильных устройствах

Если некоторые анимации выглядят неуместно в мобильной вёрстке, их можно отключить для каждого конкретного элемента, в меню Анимация:

 

Видимость элементов на мобильных устройствах

Если какой-то элемент не может или не должен отображаться в мобильной версии поста, его видимость можно отключить. Для этого выберите элемент и нажмите ▼ на верхней панели. В меню дополнительных настроек выберите Видимость -> только в десктопной версии:

Здесь же можно оставить элемент видимым только для мобильной версии, выбрав выпадающем меню пункт только в мобильной версии. Это полезно, если мобильная и десктопная вёрстка сильно различаются. Какие-то элементы можно сверстать для десктопа, а затем создать с нуля для мобильной версии.

 

Возможные проблемы и способы их устранения

Видео

Видео с отключенной опцией Responsive embed в мобильной версии не будут адаптироваться под ширину экрана. Для того, чтобы разрешить растягивание видео по ширине, во вкладке Embed > Responsive embed установите значение On.   

 

Эмбеды Facebook

Эмбед-коды некоторых сторонних сервисов могут некорректно отображаться на странице поста. Это связано с тем, что внутрь контейнера <iframe></iframe> помещается независимый документ со своими предустановленными значениями атрибутов.

При установке режима Responsive embed – On, содержимое такого эмбеда, чтобы сохранить пропорции, обрезается с одной стороны. При растягивании эмбеда по ширине экрана, проверьте в режиме предпросмотра, как будет выглядеть содержимое мобильной версии.