Die Media-Queries bringen mich zum Heulen...

[MichaelS]

Hallo Gunnar,

es ist schon wieder etwas früh geworden und ich muss in ein paar Stunden wieder loslegen. Daher nur ganz kurz.

Ich habe mir erlaubt, Deine Vorlage bei "codepen.io" mal zu verändern- und zwar habe ich Dein Menü in ein schnell gebasteltes Flex-Item, also in eine Flexbox gepackt. Flexbox mit 2 Items bei 2 Spalten in die 1. Spalte (5em breit) habe ich einen ewiglangen Text hineinkopiert. in der Zelle der 2. Spalte dann Dein Entwurf. Fazit: Ein Umbruch unter den langen Text. OK, das hätte ich durch ändern der Spaltenbreite hier ändern können, aber, wenn die Spalte farblich gestaltet ist, läuft die ins unendliche, bzw. ich habe keine Ahnung, wie ich das unterbinden könnte. Genau dies ist auf meiner Seite mit der Klasse "stamm" das Problem.

Ich habe, nicht zuletzt auch auf Hinweis und Rat von Rolf versucht, in einer css- Datei alles zu organisieren. Am Ende fand ich mich selber nicht mehr durch. Da wurde was eingeschaltet und ausgeschaltet, neu strukturiert... . Zu jeder Zeit muss ich wissen- und erkennen, was ich wie und warum gemacht habe. Es nützt ja nichts, wenn ich in 2 Monaten ratlos vor der Seite stehe und keinen Schimmer habe, wie ich das zum Laufen gebracht habe. Daher bin ich auch etwas vorsichtig, blind JS einzusetzen, was ich nicht gut nachvollziehen kann. Einfach, logisch, nachvollziehbar muss es sein.

Ich habe jetzt nicht die hochgeladene Datei "index_medium.css" kontrolliert, aber auf meinem Rechner ist in dieser Datei vermerkt: @media only screen and (min-width:601px) and (max-width:1439px){

Ich glaube, daß gleiche Größenangaben in verschiedenen Dateien gestern zu Problemen geführt haben. Bin mir aber nicht mehr sicher. Das mit px. und em. an dieser Stelle kannte ich noch nicht. Danke: Wieder etwas dazugelernt.

Die mobile Ansicht wird ganz einfach gestaltet. Keine großen Farbspielereien Einfach nur Überschrift, dann das Menü als eine Spalte über den Viewport und 5- 6 rows. Dann kommt schon der <main> Teil dran, also die wechselnden Inhalte. Im bereits angelegten Footer dann ein Link zu den Pfarrbereichen. Das wars. Also kurz, knapp und bündig.

Gruß von MichaelS