Изменение стилей для ПК и мобильной версии в шаблонах Shop-Script

Вы можете самостоятельно изменить необходимые стили в шаблонах, предварительно добавив новый код в файл user.html или user.css (в зависимости от наличия того или иного файла).

Порядок действий

1. С помощью встроенной консоли браузера найти нужный стиль для элемента.
2. Продублировать данный код в файлы user.html или user.css.

Пример на шаблоне SuperMarket Pro

1. Находим стиль заголовка

С помощью инструментов разработчика в браузере находим нужный CSS-селектор и текущие стили элемента:

.s-promo__text span {
    display: block;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-middle);
}

2. Копируем и изменяем размеры для ПК и смартфона

Добавляем в файл user.css (или user.html внутри тега <style>) следующий код:

.s-promo__text span {
    font-size: 20px;
}

@media screen and (max-width: 900px) {
    .s-promo__inner {
        font-size: 16px;
    }
}

Первой строчкой изменяется размер шрифта для версии ПК, а в запросе @media изменяется отображение в мобильной версии (при ширине экрана до 900px).

3. Сохраняем файл и получаем результат

После сохранения файла изменения сразу отобразятся на сайте: