Flexbox div Breite Überläufe auf Handy

Diese Website (http://dev-500startups.pantheonsite.io/) Ich erstelle mit Visual Composer auf WordPress benötigt Elemente horizontal und vertikal in einem Vollbild div zentriert.Flexbox div Breite Überläufe auf Handy

So verwendete ich folgende Flexbox CSS-Code:

#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; 
}

Und ich diese ID an den div Container des Headers angewendet. Keine anderen Flexbox-verwandten Eigenschaften werden auf divs und Elemente innerhalb des # Home-Header-Containers angewendet.

Es funktioniert gut auf Desktops und Tablets. Aber als ich gesehen mit Mobile im Portrait-Modus (beide Smartphones und Simulator), die gesamte #home-header div Breite immer auf die rechte Seite ist überfüllt, die Sie hier sehen können:

overflows to the right

Dies wird mit Chrome Inspector . Alle anderen Simulatoren geben die gleichen Ergebnisse und das gleiche Problem, wenn ich auch auf Handys getestet habe.

Wie kann ich die Elemente vertikal auf den kleineren Bildschirmen zentrieren, so wie bei größeren?

Quelle

2017-02-17 Samuel Faith

zu viele unnötige Dateien zu durchlaufen leicht Ihre Mühe zu verengen: 2 Hinweise: ** Breite Set irgendwo ** und nicht auf Medienabfragen zurückgesetzt, und schließlich die Verwendung von Word-Break könnte praktisch sein. für die Zentrierung, überprüfen Sie für vertikale Ränder Werte ... –

css ersetzen auf und alles funktioniert gut 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; 
}

Kopf gesetzt wurde 'position: relative'

Quelle

2017-02-17 13:59:09 grinmax

Hey Kumpel, danke für die Antwort! Leider klappt es nicht. Und diese CSS-Klasse ist für den Header (das ist der Navigationsbereich in diesem Thema), nein? –

@SamuelFaith Ich habe einen Screenshot angehängt, der zeigt, dass der Inhalt zentriert ist https://yadi.sk/d/ZVvzgxD23ED7BE es funktioniert – grinmax

Hey Kumpel, ich nahm den Code (nahm die responsive.min.css? Ver = 4.7.2: 1 was ich vermute, stammt vom Browser-Debugger) und habe es ausprobiert. :( –

Flexbox div Breite Überläufe auf Handy

Antwort

Verwandte Themen