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

Разработчикам Общение разработчиков
,
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;
    }
}
18

Парни, может знаете в чем дело.

У меня разные отступы на разрешении 480px и на 767. Пытаюсь сделать хорошо и там, и там.
Писал медиазапросы и в указанной последовательности, и сверху максимальное а внизу минимум.

Сам запрос писал и в этом виде, и в виде screen че то там с диапазонами (min-width: 481px) and (max-width: 767px)

Вощем никак не работают настройки на оба разрешения (в зависимости от того в каком виде пищу запрос) Либо настройки на все идут на 767px, либо на 480.
Может запрет какой на 480 идет?

В данном случае например спрашиваю про такое написание (двойные скобки внизу, сам класс, значение, все правильно записано)

@media (max-width: 480px) {

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

}

Моё:

@media (max-width: 480px) {
.ut2-banner .ut2-a__bg-banner .ut2-a__content .ut2-a__title.weight-700 {
padding-bottom: 85px;
}
}

@media (max-width: 767px) {
.ut2-banner .ut2-a__bg-banner .ut2-a__content .ut2-a__title.weight-700 {
padding-bottom: 75px;
}
}

В таком написанИИ идут на все настройки 767px

19

Поменяйте местами. Вы сначала даете стили для 0-480px, потом 0-767px. Под последнее оба размера и попадают

20

И нифига. На 480 да, сдвинулось. Однако и на айфон 8, там 750px, тоже сдвинулось на те же пиксели.