So dies meine Website:Mein Header zu groß auf iphone ist und bricht das Layout, um es zu kleinem Bildschirm nicht einstellen
Auf jedem Bildschirm, aber das iphone, alles scheint gut zu funktionieren . Der Titel (TOURBILLON in gelb auf der Kopfzeile) hat letter-spacing, was auf dem Desktop aus irgendeinem Grund ziemlich schwer zu schätzen ist, aber auf dem iPhone ist es ziemlich viel.
In jedem Fall geschieht, was auf eh iphone, das Wort zu groß und macht alles brechen:
ich viele Dinge ausprobiert habe. Setzen Sie max-width auf ein div und setzen Sie den Header-Text (<h1>) hinein (und rufen Sie das div auf .limitheader); versuchte -webkit-text-size-adjust:100%; in ziemlich jedem Container oder irgendwo wo ich konnte; mit @media zu bestimmen, wie es auf einem iphone ...
Ich denke, ich könnte sie alle vermasselt haben, oder einfach nicht das Richtige tun. Wenn jemand mir eine Lösung geben kann, solange es funktioniert (und die Größe passt nur auf den iPhone-Bildschirm), wäre das großartig. Ich verstehe auch nicht, warum sich der Rest des Inhalts nicht einfach nach rechts füllt. Anyways ...
UPDATE: Ich habe nicht die richtige CSS-Datei aktualisiert. Nun scheint das Problem so zu sein: Ich kann verschiedene Werte nicht zu letter-spacing in @media(min-width:768px) und @media(max-width:767px) zuordnen. Wenn ich verschiedene Werte zuweise, nimmt man den aus der größeren Bildschirmgröße und wendet ihn in jeder Größe an.
Dies ist mein Code:
HTML
<header>
<div class="header-content">
<div class="header-content-inner">
<div class="limitheader"><h1>TOURBILLON</h1></div>
</div>
</div>
</header>
CSS
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #F9C000;
background-image: url(../img/header.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header .header-content {
position: relative;
width: 100%;
padding: 100px 15px;
text-align: center;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
font-family: 'Conduit';
color: #F9C000;
letter-spacing: 20px;
margin-right: auto;
margin-left: auto;
max-width: 100vh;
-webkit-text-size-adjust:100%;
}
.limitheader {
max-width: 100vh;
}
header .header-content .header-content-inner hr {
margin: 30px auto;
}
header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 300;
color: #F9C000
;
}
@media(min-width:768px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
font-size: 18px;
}
}
@media(max-width:767px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
font-family: 'Conduit';
color: #F9C000;
margin-right: auto;
margin-left: auto;
max-width: 100vh;
-webkit-text-size-adjust:100%;
}
header .header-content .header-content-inner p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
font-size: 18px;
}
}
DANK!
nichts. Es ist so seltsam. Ich habe es sogar versucht: 'Header h1 { Übergang: 0,3 s Schriftgröße; } '' @media (max-Breite: 400px) { h1 { Schriftgröße: 21px! Wichtig; } Header .header-Inhalt.header-content-intern h1 { Schriftgröße: 7vw; } } ' – votgaus
richtig, ich 'dumm. Ich habe das falsche CSS-Dokument bearbeitet und das Update aktualisiert, das ich nicht geändert habe. Jetzt passiert das zumindest, wenn ich es ändere. Es funktioniert immer noch nicht. Ich werde den Beitrag mit dem neuen Problem bearbeiten. – votgaus