Вывод блока только для определенного разрешения экрана

Разработчикам Общение разработчиков
,
1

Пытаюсь разобраться, как сделать вывод блока только для определенного разрешения экрана. Форматы lg, md, как понимаю, не работают?
Мне нужно чтобы в блоках макета при разных разрешениях экрана выводить информацию по-разному.

2

У нас есть модуль для разных блоков на разных устройствах. Не подойдет?

3

Спасибо! Я этот модуль видел, даже установлен. Мне нужно для разного разрешения по разному выводить контент.
Нужно чтобы заработала банальная конструкция:
Для ≥1200px
div class=“ut2-block1”
ul
li1/li
li2/li
li3/li
/ul
/div

для остальных разрешений

div class=“ut2-block2”
1, 2, 3
/div

4

Для основных кейсов может подойти стандартный переключатель в настройках блока на странице Дизайн — Макеты:
Показывать на:
Смартфон Планшет ПК

5

Я пытаюсь медиа-запросами реализовать, но пока и так не получается. Так как разное содержимое css-блоков.

6

Если нужно показывать разное содержимое, то можно просто создать несколько блоков и показывать каждый на нужном разрешении.

1 лайк
7

А как можно указать разрешение для блока? Есть только ПК, планшет, смартфон.
Но для ПК тоже есть разные разрешения.

8

Если нужно более точно указывать разрешение, то нужно блоку добавить Пользовательский CSS-класс и добавить медиа-выражения в Дизайн — Темы — Редактор тем. Затем выбрать Пользовательские CSS. В интернете много статей на тему «Как писать media выражения для CSS?»

9

Но судя по вашей схеме можно обойтись одним содержимым и разными стилями.

10

Я пользовался bootstrap. Но тут эти схемы (xs, sm, md, lg) видимо не работают. Нужно разбираться как писать медиа-запросы. Вот и пытаюсь найти решение как это сделать.

11

В CS-Cart в основном используются

@media (max-width: 480px) {

}
@media (max-width: 767px) {

}
@media (max-width: 979px) {

}
12

@ziv нужны десктоп разрешения :slight_smile:

13

ecomlabs, конструкцию испробовал, работает четко. Спасибо.
Но ведь все равно контент будет выводиться одинаковый?

14

Ну либо версткой один контент менять под разные разрешения, либо скрывать и показывать разный контент под разные разрешения.

15

Так медиа-запросы работают в less-файлах. В блоках их разве можно использовать?

16

В less пишешь media для CSS-классов. В шаблонах указываешь эти классы.

17

Конечно, будет работать. Класс задавайте либо в содержимом блока, либо через настройку пользовательский класс

@media (max-width: 480px) {
    .my_class {
        font-weight: 20px;
    }
}
@media (max-width: 767px) {
    .my_class {
        font-weight: 18px;
    }
}
@media (max-width: 979px) {
    .my_class {
        font-weight: 16px;
    }
}