Не работают медиазапросы @media для разных устройств

Общее Общие вопросы
1

Тему начал тут, но видимо название не слишком понятно. Поэтому тут.

Итак, не работают сразу несколько запросов. Допустим ставлю отступы для разренения 767, 640 и 480, везде разные цифры, однако работает только один запрос, либо первый, либо последний, верхний или нижний. Хотел отступы сделать так, чтобы было везде красиво, на разном разрешении.
Так особо ничего и не вышло. Работает только один запрос и везде меняет.

Кроме этого, я у себя уменьшал вертикально расстояние между блоками, и теперь на планшете 1200х1920 эти блоки просто слипшиеся. Хотел увеличить расстояние.

@media (min-width: 1200px) and (max-width: 1340px) {
.banners-grid-resizable .row-fluid div[class^=“span”] {
margin-bottom: -30px;
}
}

@media (max-width: 767px) {
.banners-grid-resizable .row-fluid div[class^=“span”] {
margin-bottom: -60px;
}
}

Однако вообще никаких изменений на этом расширении, вообще не реагирует. Все настройки от нижнего медиазапроса…

Захотел заголовок блока поднять, и тоже та же картина.

@media (min-width: 1200px) and (max-width: 1340px) {
.ut2-banner .ut2-a__bg-banner .ut2-a__content .ut2-a__title.weight-700 {
padding-bottom: 30px;
}
}

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

И в этих примерах, и в первом примере на близких разрешениях, везде работает только одна настройка на все разрешения. Меняешь на 767, а меняется и на 1200. Хотя там своя настройка.

Унитем2. Не слышали, может запрет какой там или еще чего подобное?

2

Что же, мне выпала счастливая возможность ответить.
В первую очередь отмечу, что этот вопрос, безусловно, не относится к CS-Cart никак.
Тем не менее я с радостью распишу, что происходит с Вашими стилями:

@media (min-width: 1200px) and (max-width: 1340px) // Для экранов больше 1200px и меньше 1340px

@media (max-width: 767px) // для экранов меньше 767px

Это точно то поведение, которое Вы хотели получить?
Если да, но при этом работает не так, как ожидается, то пришлите ссылку, глянем.

3

Я вас совсем не понял. Вы взяли и скопировали то, что я написал.

qvadrant.ru на главной, верхние 8 блоков баннеров.
Слипшиеся блоки на мобильной версии на экране 1200 px. На обычной все нормально.

4

Есть мнение, что у вас в стилях полная помойка. А запроса (min-width: 1200px) and (max-width: 1340px) — нет совсем. Может кэш со стилями почистить или типо того?

Без имени-1
Без имени-11266×594 53.4 KB

5

Суть тут такая. Вот демка, надо с телефона смотреть.
UniTheme - премиум шаблон для CS-Cart

В мобильной версии верхние баннеры блоки некрасивые, вертикальные, и изменить нельзя. Мало того что вертикальные, так это просто серый фон.
В общем я уменьшил высоту этих блоков баннеров и теперь там просто пустота. А автоматом эта пустота не убралась. Все блоки и отступы остались на тех же местах. Пришлось поднимать и заголовок каждого баннера и сами блоки поднимать чтобы уменьшить по вертикали эти пустые места.
На маленьких разрешениях все красиво, а на больших расстояния между элементами уменьшается по мере увеличения разрешения.
Вощем если эти новые отступы убрать, то все станет хорошо на больших телефонах и планшетах. Однако пустота так и останется.
Все это только на мобильной версии сайта.
Проблему увидел вертикально на планшете 8 дюймов 1200х1920 и на айфоне 8 1334px, если перевернуть горизонтально. Почему то сайт открывается по горизонтали в 2 колонки, а не полностью. Например когда переворачиваю 4,5 дюймовый телефон, там 1170px, сайт открывается в 4 колонки. И там уже нет проблем. А на 1334 только в 2 колонки и естественно все слипшееся.

6

Да, я понял, о чём вы толкуете. Высота блока прописана в атрибутах — см. скриншот. Вам просто надо или удалить style=“height: 280px” или прописать стили:

.ut2-banner .ut2-a__bg-banner,
.ut2-banner .ut2-a__bg-banner .ut2-a__content.align-center,
.ut2-banner .ut2-a__bg-banner .ut2-a__content.align-center .ut2-a__img {
	height: auto !important
}

Без имени-2
Без имени-2853×250 107 KB

7

Если просто внести этот стиль просто без @media, то слипается блоки на большом сайте. На маленьком не смотрел, но скорее всего то же самое.
Если внести в код @media на допустим 480px, то картина вот такая. Если даже задокументировать те мои предыдущие правки, то картина особо не меняется.

Screenshot_20240428-092410
Screenshot_20240428-092410480×1170 82.4 KB

8

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

9

Лол. Они слипаются, потому что кто-то пытался поднять заголовки. Удалите свои стили с отрицательными маджинами и будет ок.

10

Ну я же написал, что отключал свои правки.

–

“Если внести в код @media на допустим 480px, то картина вот такая. Если даже задокументировать те мои предыдущие правки, то картина особо не меняется.”

–

Вот такая картина после внесения вашего кода для max767px и отключения моих отриц. правок.
Да, еще меняется картинка внутри блоков с contain на cover. Видите, маленькими становятся.

Screenshot_20240428-111526
Screenshot_20240428-111526480×1170 263 KB

11

Вот все мои правки, которые были по этой ситуации.

.ut2-pb .ty-previewer {
border-radius: 16px;
}

.ut2-gl__image img {
max-height: 100%;
width: auto;
border-radius: 16px;
}

@media (max-width: 767px) {
.ut2-banner .ut2-a__bg-banner {
background-position-y: top !important;
}
}

.ut2-a__bg-banner white-bg light {
height: 190px;
}

@media (max-width: 767px) {
.banners-grid-resizable .row-fluid div[class^=“span”] {
margin-bottom: -50px;
}
}

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

12

А вообще по ситуации да, кажется как будто где то сидит какой то кусок, который поднимает и заголовки и сами блоки. Но тут ведь сильное поднятие, не 10-20 px.

13

Как заставить сайт открываться на большим разрешениях не в 2 колонки, а в 4? На всю ширину.
Еще раз. Глюк выскакивает когда сайт на 1200px и выше открывается в 2 колонки

14

Чёт я не пойму, мы про разные сайты говорим что ли?

Без имени-1
Без имени-1389×716 107 KB

https://www.veed.io/view/671cbffb-1f77-4f70-bc63-339bb6440a17?panel=share

15

Мы говорим про один и тот же сайт. Только я смотрю через реальное устройство телефон, а вы через эмулятор.
И это, вы решили что я оставлю кривой сайт? Я давно уже вернул все значения назад.

16

Ну ладно, я сделал все что мог))

17

Это планшет 8 дюймов Хуавей Медиапад. 1200х1920

Screenshot_20240428_132649_com.android.chrome
Screenshot_20240428_132649_com.android.chrome1920×1200 156 KB

Screenshot_20240428_132016_com.android.chrome
Screenshot_20240428_132016_com.android.chrome1200×1920 183 KB

18

Все версии, СЛИПШИЕСЯ, на большом разрешении, показываются в 2 колонки. конечно могу опустить вниз и блоки и заголовки, но тогда на маленьких телефонах отступы расстояния будут очень большими.
Но у меня самый главный вопрос - я ведь и заголовки и блоки поднимал только для разрешения до 767px, почему на этих большим экранах он тоже действует?

19

Screenshot_20240428_133804_Chrome
Screenshot_20240428_133804_Chrome1920×864 126 KB

Screenshot_20240428_133819_Chrome
Screenshot_20240428_133819_Chrome2400×1080 218 KB

Screenshot_20240428_133836_Chrome
Screenshot_20240428_133836_Chrome1920×864 110 KB

Screenshot_20240428_133900_Chrome
Screenshot_20240428_133900_Chrome1920×864 99.8 KB

Screenshot_20240428_133908_Chrome
Screenshot_20240428_133908_Chrome2400×1080 218 KB

Screenshot_20240428_133923_Chrome
Screenshot_20240428_133923_Chrome1080×2400 198 KB

Ну так ведь все хорошо? Ради чего сыр бор?

20

Там вся проблема вылазит на экранах от 1200 до 1350. Мне кажется есть щас телефоны, с таким размером по горизонтали? Наверное если не было бы, то и хрен с ним. Но все таки, почему же эти медиазапросы то не работают одновременно для разных экранов.

Существует какой то способ сделать так, чтобы на этих разрешениях он открывался в 3-4 столбца, а не в 2?