Как решить проблему для мониторов 13 дюймов?

Question

[Alibek Kulseitov]

В общем клиенты жалуются что на их ноутубках слетают фильтры слева. Я долго не мог понять почему так, но решил попробовать зум в браузере. Когда приблизил на своем экране в 24. То фильтры слетают только на зуме при 150% а ниже и выше нормально


Вот демо сайт

Как исправить это? Медиа запросы тут не в помощь. Потому что ширина экрана не меняется.

Comments

[Дмитрий Кузнецов]

Я даже сайт не смог открыть(

[Alibek Kulseitov]

Дмитрий Кузнецов, почему?

[Alibek Kulseitov]

Дмитрий Кузнецов, Попробуйте эту страницу kulseitov.kz/sites/20twenty/free-profile.html

[Дмитрий Кузнецов]

Alibek Kulseitov, не знаю в чём было дело, но сейчас открылось)

[Дима]

Клевое погружение в material, у вас еще буква K слетает и тени странные


Мало ли вы не в курсе :)

Answer 1

[Максим Тимофеев]

Медиа запросы тут не в помощь.

Вы ошибаетесь. Фильтры у Вас уходят при ширине 991px и меньше. Собственно в css это прописано:

.query-filters {
    left: -260px;
}
@media (min-width: 992px)
.query-filters {
    left: 0;
}

Итого: изначально left: -260;, а при 992 и больше left: 0; и управляет этим как раз медиа запрос

Answer 2

[Denis]

position
на unsetпоменял все норм стало

Comments

[Alibek Kulseitov]

нет нет) тогда пропадает градиент. Суть не в градиенте была а в том что заголовок не помещается

[alexalexes]

@media (min-width: 992px) /* на этот медиазапрос */
.query-filters__inner /* на этот селектор */
{
    top: 6rem;  /* поставьте больше rem-ов */
}

[Denis]

Denis, alexalexes, Согласен!