Das <html> Element passt nicht zum Bildschirm

Ich arbeite an einem einfachen, responsive Layout, und ich habe ein Problem mit der unerwarteten Größe von HTML-Element. Alles ist in Ordnung, wenn die Größe eines Bildschirms größer als 1080px ist, aber jedes Mal, wenn ich die Größe des Bildschirms ändere oder die Seite auf ein Handy lade, wird das HTML-Element kleiner als die Bildschirmbreite.Das <html> Element passt nicht zum Bildschirm

Here you can see what I am talking about.

And here you can see the html width

Was ich versucht habe:

1) Einstellung der html und Körper Rand, Polsterung, auf 0 und Breite von ihnen (I this CSS-Reset bin mit) beide zu 100%;

2) Einstellen der Box-Sizing-Eigenschaft auf border-box;

3) Hinzufügen:

html, body{width: 100%; padding: 0; margin: 0;}

4) Ich habe auch versucht, einige js Code zu schreiben, um die Breite des Körpers auf Resize zu setzen, aber ich bin nicht gut darin js, damit es nicht geholfen werden ..

5) Auch die Änderung der Schriftgröße wird nicht helfen.

Wahrscheinlich gibt es eine einfache Lösung, aber je mehr ich versuche, es zu beheben, desto mehr werde ich verwirrt, so hoffe ich, jemand wird mir helfen.

Ich bin ziemlich neu hier, also bitte für ein wenig mehr Geduld für mich :). Hier

ist der Körper css:

body{ 
background-image: url(gwiazdy.png) !important; 
background-position: center; 
background-attachment: fixed; 
background-size: cover; 
background-color: #000; 
width: 100% !important; 
font-size: 20px !important; 
padding: 2% 0 !important; 
margin: 0 !important; 
font-family: 'Bellefair', serif !important; 
color: #ccc !important; 
min-width: 329px !important;} 


@media screen and (max-width: 752px) { 
.content{ 
    width: 100% !important; 
} 
body{ 
    padding: 0 !important; 
    padding-bottom: 15 !important; 
} 
}

wenn es nicht enaugh, können Sie click here und mein Layout sehen, auch die gesamte CSS und HTML sehen.

Quelle

2017-11-06 jannec22

Sie ein Element, das weiterten, dass der Körper – marciojc

Schreiben Sie die HTML, die diese Frage als auch relativ ist – zer00ne

Sein Ihr '.about_text' – marciojc

.home { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .title{ 
 
    text-align: center 
 
    } 
 
    
 
    .about { 
 
    display: flex; 
 
    flex-direction: row; 
 
    } 
 
    
 
    .about > div { 
 
    flex: 1; 
 
    padding: 0 10px 0 10px; 
 
    } 
 
    
 
    .about img { 
 
width: 100%; 
 
    }

<div class="home"> 
 
    <div class="title"> 
 
    <h2> 
 
     About 
 
    </h2> 
 
    </div> 
 
    
 
    <div> 
 
    Masz dużo na głowie i nigdy nie masz czasu na szukanie swoich przepisów? Zarejestruj się i trzymaj wszystkie swoje przepisy w jednym miejscu! 
 
    </div> 
 
    <div class="about"> 
 
    <div> 
 
     <img src="//www.placehold.it/300x300?text=About"> 
 
    </div> 
 
    <div> 
 
     <img src="//www.placehold.it/300x300?text=About"> 
 
    </div> 
 
    <div> 
 
     <img src="//www.placehold.it/300x300?text=About"> 
 
    </div> 
 
    </div> 
 
    
 
</div>

Dieses Problem wird durch .about_text Elemente verursacht. Die Art und Weise, wie Sie diesen Abschnitt codiert haben, ist nicht korrekt. Sie haben eine display: flex auf Ihrem .home div festgelegt, und standardmäßig hat flex Eigenschaft flex-direction: row. Sie versuchen jedoch, Ihre Elemente unter dem .home-div als eine Spalte anzuzeigen, indem Sie den Elementen width: 100% hinzufügen. Verwenden Sie stattdessen flex-direction: column und fügen Sie ein neues div hinzu und platzieren Sie alle .about_text-Elemente in diesem div und fügen Sie dem div eine Eigenschaft flex-direction: row hinzu.

Quelle

2017-11-06 22:07:20 izulito

Ok, es funktioniert, aber jetzt habe ich wieder ein Problem mit dem Hauptproblem. Wahrscheinlich ist ein Element größer als das Elternteil. Und noch einmal habe ich keine Ahnung, welche .. – jannec22

Anzeige entfernen: Inline-Block aus dem folgenden Code. .Material-Icons { Schriftfamilie: 'Material Icons'; Schriftgewicht: normal; Schriftart: normal; Schriftgröße: 24px; Zeilenhöhe: 1; Buchstabenabstand: normal; Text-Transformation: keine; Anzeige: Inline-Block; Leerzeichen: nowrap; Wortumbruch: normal; Richtung: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } – izulito

Das <html> Element passt nicht zum Bildschirm

Antwort

Verwandte Themen