HTML Responsive Layout hilfe?

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
20.09.2024, 19:36

Entferne die Angaben zu Außenabstand und Breite aus deinem CSS:

  • #image-me-container (margin, width)
  • #image-container (margin-right, width)
  • #about-me-container (width)
  • #words-container (margin, width)
  • @media #image-me-container (width sowie align-items)
  • @media #about-me (width)
  • @media #image (width)

und packe beide Container stattdessen in ein weiteres Element, welches künftig als Content Container dient.

HTML:

<div class="content-wrapper">
  <!-- #image-me-container -->
  <!-- #words-container -->
</div>

CSS:

.wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 50%;
}

@media (max-width: 1000px) {
  .wrapper {
    width: 90%;
  }
}

Den Abstand zwischen Bild und Auflistungsbox kannst du mittels gap definieren.

(...) und was könnte ich noch verbessern.

1) Ordne deine Inhalte in semantisch passende Elemente ein. Ein div-Container sollte stets nur die letzte Wahl sein, da ein nichtsemantisches Element darstellt.

Für #name eignet sich beispielsweise ein h1-Element, die zweite Überschriftenebene (#subtitle-about-me, #subtitle-words) wäre demnach h2. Die Container könnten mit einem article-Tag repräsentiert werden, für #words-text ist ein Paragraph passend.

2) Deinem img-Element fehlt ein alt-Attribut, dessen Wert als Textalternative zum Bild dient. Eine kurze Beschreibung des Bildes (Was zeigt es?) wäre hier angemessen.

3) Der Wert top ist für align-items nicht gültig. In deinem Fall könntest du flex-start einsetzen.

4) Ich würde dir empfehlen, den Media-Query-Selektor nach unten zu verschieben. So können gleichnamige Selektoren einfacher überschrieben werden.

5) Sicherlich könnte man einige CSS-Properties verschiedener Selektoren in einen Selektor zusammenziehen und somit den CSS-Code verkürzen. Statt ID-Selektoren zu verwenden, empfehle ich Klassenselektoren.
Aiuser 
Beitragsersteller
 20.09.2024, 20:48

Wenn ich die ganzen angaben von oben entferne, sieht es doch 0 mehr so aus, wie ich es haben will. Oder nicht