Webdesign umsetzung

[Rolf B]

Hallo Melissa,

bei Elementor wurde eine Flexbox verwendet, um die beiden Bereiche nebeneinander dazustellen. Allerdings wird die display:flex Eigenschaft je nach Breite auf das eine oder andere div gelegt, was mir merkwürdig vorkommt und meiner Meinung nach nicht nötig ist.

Was Du nicht tun solltest, sind div Element mit Klassennamen wie links und rechts. Das ist präsentationsbezogen und im Fall eines schmalen Viewports ja auch falsch. Besser wäre statt div.links das article Element und für div.rechts das aside Element.

Ramen mit Border - kein Problem. Solange sie nicht Varelse werden (Hä?)

Die Elemente kannst Du dann beispielsweise so stylen:

#about {
   max-width: 60em; margin:auto; display:flex; flex-wrap:wrap;
}
article, aside {
   flex: 1 0 20em;
}

dann wird bei einer Viewportbreite von unter 40em der wrap aktiv und das Bild unter den Text gestellt. Ganz wichtig: em, nicht px. Dein Layout sollte in Bezug auf die von Dir genutzte Schriftgröße skalieren. Pixel sind - vor allem auf hochauflösenden Geräten - eine Fiktion des Browsers - ein CSS Pixel ist viel größer als ein Bildschirmpixel.

Was mir auch merkwürdig vorkommt, ist ein HTML wie dieses:

<div>
<h3>...</h3>
<h4>...</h4>
<p>blablabla</p>

Also zwei Überschriften auf zwei Stufen für einen Textabschnitt. Hier wird h3/h4 als Tool zur Auswahl einer Schriftgröße verwendet, das ist semantisch falsch und bringt die Gliederung durcheinander. Das eine ist die Überschrift, das andere ein Untertitel. HTML bietet hierfür keine eigenen Elemente, aber bestimmte idiomatische Muster. Der HTML Standard zeigt Beispiele, wie man es machen kann. Zum Beispiel mit einem header Element (Yep! Das ist nicht nur am Seitenstart erlaubt).

<article>
<header>
<h3>Willkommen bei ConstructaWorks</h3>
<p>Auf uns können Sie bauen!<p>
<header>
<p>Ihre Wünsche für das Dach sind eine Herausforderung? Uns fällt sicher etwas ein!</p>
</article>

Rolf