У меня есть 4 медиазапросы в этом порядке в моем CSS:Крупнейший медиа-запрос (мин-ширина: 1020px) продолжает перекрывая наименьшего медиа-запрос (макс-ширина: 599px) значение гибкого трубопровода в направлении
@media screen and (max-width: 599px)
@media screen and (min-width:600px) and (max-width: 895px)
@media screen and (min-width: 896px) and (max-width: 1019px)
@media screen and (min-width: 1020px)
Они работают в основном, за исключением тех случаев, когда я пытаюсь изменить направление движения. У меня есть этот класс выше запросов СМИ:
.home-mod4-founders {
display:flex;
align-items:stretch;
}
И это при малейшем медиа запроса:
@media screen and (max-width: 599px) {
.home-mod4-founders {
flex-direction:column;
}
}
По какой-то причине, когда экран находится под 599px, она принимает значение одного из 3 других запросов:
.home-mod4-founders {
flex-direction:row;
}
Когда я проверил страницу с Дев инструментов Chrome, он, казалось, вырезать часть медиа-запросов крупнейшего один так, что она перекрывает запрос 599px СМИ: screenshot Живой сайт здесь: www.whisperlodge.nyc
И я скопировать вставили CSS и HTML в codepen http://codepen.io/chillinkwa/pen/MJZVEj
Когда вы меняете «flex-direction», 'align-items: stretch' больше не применяется к поперечной оси. Вместо этого он применяется к главной оси для «flex-direction: column». Не смотря на полный код, трудно сказать, что не так. –
ОК только что подписался на Codepen и застрял мой CSS и HTML в ручке: http://codepen.io/chillinkwa/pen/MJZVEj Если что-то не видно в ручке, возможно, это потому, что это wordpress.com , Живой сайт также находится по адресу: www.whisperlodge.nyc – chillinkwa