Как сделать красивую мобильную версию

Мобильная версия генерируется автоматически из обычной версии по правилам. Делаем лендинг в редакторе по этим правилам и получаем идеальную мобильную версию.

Правила генерации мобильной версии:

Красные колонки из редактора в мобильной версии перестраиваются последовательно по горизонтали (слева направо), по вертикали (сверху вниз). Структура контента внутри них (синие колонки) сохраняется и ужимается пропорционально. Смотрим на примерах, как перестроятся колонки в мобильной версии
Mobile-26

Рассмотрим частые ошибки и как их исправить

    1. Посмотрим как должна выглядеть правильная структура. Видим, что контент, расположенный внутри красных колонок, сохраняет свою структуру:
      Mobile-27
    2.  А вот что будет, если иконки с текстом и кнопки находятся в разных красных колонках
      Mobile-28
    3. Или вот такой пример
      Mobile-31

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

Важно:  В редакторе мобильная версия генерируется не совсем корректно, из-за сложностей с эмуляцией реальных телефонов, поэтому смотреть её лучше на реальных телефонах.