Hallo zusammen,
ich bin am Ende meines Lateins, weil ich es einfach nicht verstehen kann. Ich musste an meiner Seite: http://www.coaching-speyer.de den Hero Text von links nach rechts verschieben. Das ist der weiße Text über dem großen Bild von meiner Freundin. Nun habe ich das gemacht und für 3 Devices versucht zu optimieren: iPhone (6), iPad (normal, nicht Mini, glaub 2) und Desktop.
Problematisch sind 2 Dinge - und immer noch ungelöst:
1) Auf dem iphone 6 portrait wird das Bild zu weit aus dem Bild nach links rausgeschoben. Das gefällt mir so nicht.
2) Wenn ich auf dem Desktop den Browser etwas kleiner mache, dann springt der Text irgendwann wieder in seine Ausgangslage nach links. Vermessen habe ich etwa bei 1200px. Das käme auch hin, da ich die min-width bei 76.5 em habe. Stelle ich diese aber auf ein kleineres Maß - bspw. auf 30em, dann hat das wiederum Auswirkung auf die iPad Version. Also insgesamt beeinflusst da jedes Datum jede Darstellung. Ich werde verrückt.
Kann mir vielleicht jemand helfen, den Code richtig zu schreiben? Die div. Internetseiten habe ich alle schon durchgelesen - das hier ist nun das Ergebnis meines Selbststudiums:
/*
Anpassung Hero Text
*/
/* Smartphones (portrait & landscape) ----------- */
Media only screen
and (min-device-width: 20em)
and (max-device-width: 30em){
.hero-title {
font-size: 1.5em;
font-family: "Open Sans";
}
.hero-content {
position: relative;
top: 20px;
left: 0;
}
}
/* iPads (landscape) ----------- */
Media only screen
and (min-device-width: 48em) and (max-device-width : 64em) and (orientation : landscape){
.hero-title {
font-size: 2em;
font-family: "Open Sans";
}
.hero-content {
position: relative;
top: 0px;
left: 490px;
}
.hero-content-wrap {
max-width: 370px;
}
}
/* iPads (portrait) ----------- */
Media only screen
and (min-device-width: 48em) and (max-device-width: 64em)
and (orientation: portrait) {
.hero-title {
font-size: 2em;
font-family: "Open Sans";
}
.hero-content {
position: relative;
top: 0px;
left: 190px;
}
.hero-content-wrap {
max-width: 370px;
}
}
/* Desktop ----------- */
Media only screen
and (min-width : 76.5em) {
.hero-title {
font-size: 45px;
font-family: "Open Sans";
}
.hero-content {
position: relative;
top: 0px;
left: 620px;
}
.hero-content-wrap {
max-width: 688px;
}
}
Vielen Dank und viele Grüße
Marco