Корректировка мобильной версии сайта

Как дополнительно настроить вид страницы на разных устройствах.
Тильда автоматически подстраивает сайт для просмотра на планшетах, смартфонах, нетбуках, ноутбуках и компьютерах. Дополнительно можно настроить отступы между блоками для мобильных и диапазон видимости блока на разных устройствах.
Диапазон видимости на устройствах
Функция, которая определяет на каких устройствах будет виден данный блок, а на каких нет. Есть в настройках каждого блока.
Зачем нужно и как это работает.
Если блок хорошо выглядит на компьютере, но на экране мобильного отражается плохо, то нужно установить диапазон видимости данного блока 980 px и выше. Это будет десктопная версия блока, она перестанет отображаться на мобильных телефонах.

Затем нужно скопировать этот блок и настроить его внешний вид специально для мобильных (поменять фотографию, шрифт и т.д). Этому блоку задать диапазон видимости от 0 до 980px. Это будет мобильная версия блока.

Таким образом, на компьютере пользователь будет видеть десктопную версию, а на мобильных устройствах — мобильную.

Диапазон (разные значения параметров) нужен, чтобы при необходимости вы могли настроить внешний вид блока для какого-то конкретного устройства, выбрав разрешение. Например, если блок плохо отображается именно на планшете или на определенной модели телефона.
Пример
Для примера рассмотрим как настроить мобильную версию обложки, на которой текст выровнен по левому краю, а на фотографии значимый объект расположен справа.
Проверяем как выглядит сайт на телефоне, видим, что фотография обрезается неудачно.
Данному блоку ставим видимость > 980px. Теперь он не будет отображаться на мобильных устройствах.
Копируем блок.
Адаптируем копию блока для мобильной версии — меняем фото и выравнивание текста.
Этому блоку ставим видимость ≤980px. Его не будет видно на устройствах с шириной экрана более 980px.
Готово. На разных устройствах обложка отображается по-разному, в зависимости от ширины экрана.
Примеры ширины экрана различных устройств
iPhone5 — 320px
iPhone6 — 375px
iPhone6+ — 414px
iPad — 1024px
Samsung Galaxy — 360px
Nokia Lumia — 320px
Настройка отступов для мобильных
В любом блоке откройте настройки и нажмите на иконку рядом с «отступ сверху, отступ снизу» и задайте расстояние для мобильного устройства.
Made on
Tilda