Wie h2 an iPhone-Geräte anzupassen

Ich habe dieses Problem mit h2 auf iPhone-Geräten. Der h2 geht aus der Mitte, obwohl der Code gut aussieht. Ich kann nicht herausfinden, warum es passiert.Wie h2 an iPhone-Geräte anzupassen

h2 off center

Hier ist mein Code:

/* for iPhone-sized devices */ @media only screen and (max-device-width: 480px) { 
.container { width: auto } 
body { padding: 0 } 
h1 { font-size: 1.5em; margin-bottom: 3em; text-align: left } 
h2 { font-size: 2em; margin-bottom: 1.5em; text-align: center } 
h3 { font-size: 1.8em } 
h6 { font-size: 1em; text-align: left } 
p { 
    font-size: 1.2em; 
    line-height: 1.4em; 
}

Meine Website ist: mamufka.com.

Würde gerne ein paar Tipps von Ihnen erfahren Jungs hören!

Quelle

2016-04-06 Anna

Sie haben eine allgemeine Regel für Ihr h2 Element, das dazu führt, dass die Ränder mit der Seite kollidieren, bevor sie zentriert wird.

Try this:

@media only screen and (max-device-width: 480px) { 
h2 { font-size: 2em; margin: 0 0 1.5em 0; text-align: center } 
}

Quelle

2016-04-06 10:11:01

Bitte links/rechts-Marge von h2

mir

h2 { font-size: 2em; margin: 0 0 1.5em; text-align: center }

Quelle

2016-04-06 10:11:08

sieht ziemlich gut entfernen, aber wenn man es horizontal ausgerichtet machen wollen, sollten Sie die Ränder entfernen von links und rechts:

h2 { 
    margin-left: auto; 
    margin-right: auto; 
}

Der Text ist tatsächlich größer als der Raum, den Sie gav e ihnen wegen dieser Marge.

Quelle

2016-04-06 10:11:37 Gofilord

Ich habe alle Ratschläge ausprobiert, aber es funktioniert immer noch nicht. Kann es sein, dass das Mobilgerät diesen Teil von CSS nicht liest? Ich habe versucht, die Größe der Schriftart zu ändern, und es würde nicht so gut funktionieren. Vielleicht habe ich etwas mit CSS vermasselt? @gavin – Anna

@Anna Interessant. probiere '@media-Bildschirm und (max-width: 480px)' und versuche, die Farbe von h2 auf rot zu ändern, damit du sicher sein kannst, ob es funktioniert oder nicht. Versuchen Sie auch, etwas in der Desktop-Version zu ändern, um zu sehen, ob die Online-Website überhaupt aktualisiert wird. – Gofilord

Ich habe versucht, die Farbe im mobilen Teil des Codes zu ändern und es liest es nicht, nichts ändert sich. Aber in der Desktop-Version funktioniert alles gut. Könnte es einen Fehler geben, den ich nicht sehen kann? – Anna

Reduzieren Sie den Rand in @media Abfragen. Gefällt mir:

@media only screen and (max-device-width: 480px){ 
    h2 { 
     margin: 2em 0em 0 0em; 
     font-size: 2em; 
     margin-bottom: 1.5em; 
     text-align: center; 
    } 
}

Quelle

2016-04-06 10:12:18 Roy

Wie h2 an iPhone-Geräte anzupassen

Antwort

Verwandte Themen