Homepage (TEST-Phase) wird auf Smartphone nicht zentriert angezeigt

[marctrix]

Hej wowogiengen,

direkt darauf dann mal meine Frage. Wenn man die 2 em Rand weglässt, wird die Seite richtig zentriert. Was müsste ich aber machen, wenn ich die Seite mit Rand zentriert haben will? Den Body ganz normal mit margin: auto zentrieren? Und dann darin ein div, welches die 2 em Rand enthält?

Wenn Du einen Abstand haben möchtest, musst du den angeben. Auf der vorliegenden Webseite kann man zwei Abstände in dem betreffednen Element nutzen: den Innenabstand und den Außenabstand. Man kann außerdem die Abständer der umliegenden Elemente (body und html) nutzen um den gewünschten Effekt zu erreichen.

Wenn man Abstände nur bei einer bestimmten Viewportgröße möchte, kann man gezielt festlegen, für welche Medien mit welchen Dimensionen man Abstände möchte. Dazu dient @media (Artikel zu Media-Queries gibt es im Wiki). Beispiel:

body {
  margin: 0 auto;
}
@media screen and (min-width: 30em) {
  body {
    padding: 2em;
  }
}

Du kannst aber auch Abstände "responsiv" angeben, also abhängig von der Bildschirmbreite, so dass auf schmalen Bildschirmen schmale Abstände verwendet werden. Die Einheit vw bezieht sich auf die Breite des browserfensters (genauer gesagt des Viewportes). 1vw entspricht einem hundertstel der Viewportbreite.

Vielleicht reicht dir also auch so etwas, dann kannst du dir die Media-Query sparen:

body {
  margin: 0 auto;
}
body {
  padding: 2em 5vw;
}

Zu guter letzt kann man beides auch miteinander kombinieren (ich glaube calc darf nicht in der Kurzschreibweise verwendet werden, habe ich jetzt nciht nachgeschaut):

body {
  margin: 0 auto;
}
body {
  padding: 2em;
  padding-right: calc(1em + 2.5vw);
  padding-left: calc(1em + 2.5vw);
}

Am besten du spielst mit den verschiedenen Möglichkeiten und Werten ein wenig herum, bis du das für Deinen Fall ideale Ergebnis hast.

Marc