Почему этот стиль медиа-запроса применяется ниже указанного порога?

У меня возникла проблема, когда медиа-запрос с указанной min-шириной применяет свой стиль ниже указанного порога. Это происходит и в хроме, и в фаерфоксе. Я понятия не имею, что может быть причиной этого.

скриншот глючной странности

Код довольно прост. Элемент представляет собой <ul> со свойством display, установленным на flex. Все, что должен сделать медиа-запрос, — это изменить flex-direction со значения по умолчанию на column. Он делает это успешно, но при неправильных размерах экрана. Это не какой-то другой стиль, переопределяющий мой код — как показано на рисунке, это конкретное правило, которое применяется, даже если экран более чем на 60 пикселей меньше минимальной ширины. Это произойдет вплоть до ширины экрана 578 пикселей, после чего правило больше не применяется.

В случае, если это имеет значение: это сайт WordPress, использующий очень глючную тему и элементор, о которых я не имею права говорить. Мой CSS-код для исправления ошибок и стилизации входит в дополнительный раздел CSS WordPress Theme-Customizer.

Я не понимаю, почему это происходит, и был бы признателен за любой вклад по этому вопросу.


person Groonworld    schedule 05.09.2020    source источник
comment
Вы можете поделиться кодом, связанным с этой проблемой. Что касается этой картины, я не могу сказать, почему.   -  person Simplicius    schedule 05.09.2020
comment
CSS медиа-запроса состоит только из того, что видно на картинке. Это только одна линия. HTML — это код плагина поверх elementor поверх действительно плохо закодированной темы, поэтому я не думаю, что его публикация будет полезной. Вопрос, который у меня есть, относится к более общему пониманию: что может заставить браузер отображать условный стиль, даже если условие явно не выполняется?   -  person Groonworld    schedule 05.09.2020


Ответы (1)


Я не уверен, понял ли я вопрос, но если вы имеете в виду, что определенный css не применяется для небольших экранов (он применяется только к X-769px, но не под X), возможно, это потому, что вы установили стиль для экранов под X. Видите ли, в elementor у нас есть настольные планшеты и мобильные устройства для адаптивного дизайна, и каждый из них наследует стиль большого экрана. Вероятно, вы установили стиль для мобильных устройств, отличный от планшета.

person mhdi    schedule 08.09.2020
comment
На скриншоте показаны инструменты разработчика Chrome. Если бы этот стиль был отвергнут другим, это было бы показано в виде сквозного удара. Здесь это не так — применяется столбец flex-direction:. Но это должно применяться только для экранов с разрешением 769 пикселей или шире. Как вы можете видеть в верхнем левом углу, текущая ширина экрана составляет всего 708 пикселей. Медиа-запрос в силе. Но этого не должно быть, так как его условие - min-width, а здесь это условие не выполняется. Тем не менее, стиль применяется, и я пытаюсь понять, почему. - person Groonworld; 09.09.2020