Ширина переполнения Flexbox на мобильном телефоне

Этот сайт (http://dev-500startups.pantheonsite.io/) Я создаю с использованием Visual Composer для WordPress элементы, которые расположены по горизонтали и вертикали в полноэкранном div.Ширина переполнения Flexbox на мобильном телефоне

Таким образом, я использовал следующий код Flexbox CSS:

#home-header { 
height: 100vh; 
display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-pack: center; 
    -ms-flex-pack: center; 
     justify-content: space-between; 
-webkit-box-align: center; 
    -ms-flex-align: center; 
     align-items: center; 
}

И я применил этот идентификатор для сНа контейнера заголовка. Никакие другие связанные с flexbox свойства не применяются к divs и элементам внутри контейнера # home-header.

Он хорошо работает на настольных компьютерах и планшетах. Но когда я смотрел с помощью мобильного телефона в портретном режиме (с использованием как смартфоны и имитатор), что вся #home-header ширина DIV всегда переполнена с правой стороны, которые вы можете увидеть здесь:

overflows to the right

Это использует Chrome инспектор , Любые другие симуляторы дают одинаковые результаты и одинаковые проблемы, когда я тестировал и на телефонах.

Как я могу заставить элементы центрировать по вертикали на меньших экранах, как на больших?

источник

2017-02-17 Samuel Faith

слишком много файлов ненужных пройти легко сократить ваши проблемы: 2 подсказки: ** ширина набор где-то **, и не сбрасывать запросы на медиа-запросы, и в конечном итоге использование разрыва слова может быть удобным. для центрирования, проверьте значения вертикальных полей ... –

Заменить CSS, и все работает хорошо https://yadi.sk/d/ZVvzgxD23ED7BE

@media only screen and (max-width: 1000px) 
responsive.min.css?ver=4.7.2:1 
.header_inner_left, footer.uncover, header { 
    position: absolute !important; 
    width: 100%; 
    left: 0!important; 
    margin-bottom: 0; 
}

Был установлен заголовок «положение: относительно»

источник

2017-02-17 13:59:09 grinmax

Эй, друг, спасибо за ответ! К сожалению, это не сработает. И этот класс CSS предназначен для заголовка (который является областью навигации в этой теме), нет? –

@SamuelFaith Я приложил скриншот, который показывает, что контент выровнен по центру https://yadi.sk/d/ZVvzgxD23ED7BE, он работает – grinmax

Эй, парень, я действительно взял код (вынул отзывчивый.min.css? Ver = 4.7.2: 1, который я предполагаю, из отладчика браузера) и попробовал его. :( –

Ширина переполнения Flexbox на мобильном телефоне

ответ

Смежные вопросы