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

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

Советы по настройке

Оптимальные размеры

Делайте ширину мобильного виджета не больше 300px, а высоту не более 800px.
На маленьких устройствах слишком широкий виджет может выходить за пределы экрана, нарушая внешний вид сайта, или его будет сложно заполнить.
Слишком высокая высота может потребовать прокрутки, что неудобно для пользователей.

Настройка стилей через CSS

Стили текста наследуются из ПК-версии виджета. Лучше настраивать стили текста, кнопок и полей через поле CSS.

Популярные параметры CSS:

font-size – размер текста
color – цвет текста
line-height – межстрочный отступ
font-family – шрифт (можно использовать шрифт с сайта, название должно быть в одиночных кавычках ' )
background-size – размер фонового изображения
font-weight – толщина текста

Пример CSS-кода для текста:

color: #002B56;
font-family: 'Noto Sans', sans-serif;
font-size: 30px;
font-style: normal;
font-weight: 500;
line-height: normal;

Важно! Шрифт в окне предпросмотра Convead может отличаться от предпросмотра на сайте, если вы используете кастомные шрифты. Обязательно проверяйте отображение на сайте.

Размеры шрифтов