3 Spalten im Footer responsive gestalten

[Rolf B]

Hallo Matthias,

was "in Ordnung" ist, soll er nach 10 Stunden Studium der Tutorials erraten? Klingt frustrierend für ein kleines "Hilf mir mal bitte". Die Tutorials sind natürlich lesenswert, aber ein kleines tl;dr kann nicht schaden.

Ich ergänze das also mal:

• Verwende semantisches Markup, d.h.

  • footer Element statt div
  • div class="row" ist Kitsch, keine Kunst, und kann weg. Der einzige Zweck ist, über ein ::after Element die Floats zu clearen, und die Floats sollten ja durch Flex oder Grid ersetzt werden.
  • section Elemente statt der left/map/rightfooter div
  • ob h3 tatsächlich angemessen ist, darüber bin ich mir unsicher. Ja, es ist eine Überschrift. Aber wo ist das h2 dazu? Die h… Elemente definieren eine Dokumentgliederung. Wenn zwischen dem h1 der Seite und den h3 kein h2 ist, müsste man im footer h2 verwenden, oder ein nicht sichtbares <h2>Seitenfuss</h2> verstecken. Oder?

• Verwende mobile first, d.h. drehe die Media-Abfrage um. Auf schmalen Viewports sollten die Media-Abfragen nicht zutreffen. Und wenn sie breiter werden, dann wird das Layout dafür umgebaut.

  • Heißt für die Karte: display: none; im Normalfall und display:block; wenn genug Platz ist.

• Für das Layout ist Grid-Layout am einfachsten. Schau Dir mal an, was hier mit der grid-Eigenschaft gehext wird. Internet Explorer Anwender bekommen allerdings keine so schöne Ansicht. Dafür ist Flexbox einfacher.

Rolf