Zweierlei Probleme mit meiner Website

[Rolf B]

Hallo Tassilo,

das ist nun mal so, Computer tun nie, was sie sollen. Immer nur das, was man ihnen sagt.

Guck in sturm-main-style.css, Zeile 406, da steht flex-basis: 3.1rem;. Nun ist das die Breite deines Buttons, und der Text im aufgeklappten Menü braucht mehr Platz, darum drängt sich das noch ein bisschen auseinander. Aber eben nicht die Breite, die Du gern hättest.

Meiner Meinung nach sollte da flex-basis:auto stehen und max-width: 23em, dann macht sich das Flex-Element so breit wie sein Inhalt ist, aber nicht mehr als die 23em aus der Breitwand-Ansicht. Vielleicht möchtest Du auch weniger als 23em haben.

Deine Flex-Steuerung des contentspan ist sowieso suboptimal.

(1) .contentspan hat flex-grow/shrink/basis Eigenschaften, aber das Elternelement (body) ist kein Flex-Container. Diese Kunst ist Kitsch und kann weg. (2) main hat flex-basis:calc(...), das ist unnötig, das kann der Browser besser alleine. Genau dafür ist flex-grow da. Wenn main-nav auf flex-grow:0 gesetzt ist und main auf flex-grow:1, dann wird der Browser das main-Element soweit verbreitern, dass es den Flex-Container (also .contentspan) füllt. (3) die Gruppe flex-grow:x; flex-shrink:y; flex-basis:z kannst Du zusammenfassen zu flex: x y z;. Für main-nav also z.B. flex:0 0 auto, für main wäre es flex:1 0 auto;

Frage 2 verstehe ich nicht. Möchtest Du, dass Navigation und Inhalt übereinander (als column) angezeigt werden, statt nebeneinander? Das liegt am unveränderten display:flex; flex-direction:row; im .contentspan. Den müsstest Du in flex-direction:column umschießen. Allerdings scheint mir die Navigation etwas hoch für diese Idee, verstehe ich deinen Wunsch vielleicht falsch?

Rolf