Как задать разные стили для мобильной и десктопной версий сайта

В Аспро: Премьер с версии 1.3.0 и Аспро: Лайтшоп с версии 2.5.4 появилась возможность задавать различные стили для мобильной и десктопной версий в отдельных файлах «custom.css». Давайте посмотрим на примере, как это сделать.

Проделайте следующий путь:

Для Аспро: Премьер:
Аспро (1) → Аспро: Премьер (2) → Для разработчиков (3).

Для Аспро: Лайтшоп:
Аспро (1) → Аспро: Лайтшоп (2) → Для разработчиков (3).

Выберите десктопный или мобильный шаблон.

Кликните на кнопку «Редактировать» в поле «Файл пользовательских стилей css».

В файле для десктопной версии пропишите стили. В нашем примере строка выглядит следующим образом:

 .scroll-header-tags__item:nth-child(2n) {
    color: red;
}

Сохраните изменения.

Для десктопной версии сайта изменился цвет кнопок меню через одну на красный.

В файле для мобильной версии также можно прописать код.

 .header-cabinet__link .svg use {
    fill: red;
}

Сохраните изменения.

Для мобильной версии изменился цвет иконки личного кабинета, а для десктопной — нет.