Bild ein-/ausblenden und nicht Diskussion um alt=...

[Rolf B]

Hallo beginner,

wenn Du es denn so wie empfohlen gemacht hättest...

(1) Das Standard-Design einer Seite sollte die schmale Ansicht sein. Wenn genug Platz ist, baut man um. Nicht andersherum. Das Handy ist heutzutage der wichtigste Web-Client.

Also @media (min-width:...)

(2) Du solltest den Media-Break wirklich in em festlegen! Vergiss bitte das Pixel. Orientiere Dich an der eingestellten Schriftart. Wenn dein Anwender die Browserschrift verändert (z.B. weil er besonders gut oder besonders schlecht sieht), sollten sich die Vorstellungen, die deine Seite von groß und klein hat, sich dem anpassen. 1em ist bei Standardfonts 16px, verwende min-width:50rem für den Mediabreak. Vor allem min-width, nicht max-width. Dann funktioniert es auch richtig herum: Außenbilder bei breitem Fenster, Innenbild bei schmalem Fenster.

(3) Ich hatte Flexbox vorgeschlagen, Du nimmst Grid. Okay. Kein Problem. Aber du hast einen Typo in grid-template-columns. Die rechte Klammer wird nicht verstanden, und damit die Eigenschaft ignoriert. Die Folge ist, dass dein Grid nur eine Spalte hat, und nach Bedarf weitere Zeilen angefügt werden.

Zweitens definierst Du 3 Auto-Spalten. Ich würde die beiden Text-Spalten auf Breite 1fr setzen und nur die Bildspalte auf auto. Dadurch wird die Bildspalte so breit wie das Bild und der verbleibende Rest zu gleichen Teilen auf die Textspalten verteilt (1fr = one fraction = 1 Anteil).

Drittens musst Du beachten, dass Du beim Umschalten auf breites Layout eine Spalte mehr hast. Du musst also das grid-template im @media-Block ändern, mein Vorschlag wäre grid-template-columns: auto 1fr 1fr auto;

Was ich auch vorschlagen würde, ist ein align-items:center für den header. Dadurch wird der Text vertikal zentriert. Aber das hängt dann auch vom echten Text ab.

https://jsfiddle.net/Rolf_b/rbuhjpst/

Rolf