From ae9878cb4c225ea00e3e83a654dd4ce9ba4a64dc Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sat, 22 Aug 2026 19:08:47 +0200 Subject: [PATCH] Sprungmarken auf breiten Bildschirmen alle in einer Reihe Rueckmeldung 22.08.2026: "alle neben einander bitte". Vorher passten vier in die Zeile und die fuenfte rutschte allein darunter -- das sieht aus wie ein Versehen, nicht wie eine Gestaltung. Ab 700px teilen sich jetzt alle fuenf den Platz zu gleichen Teilen ("flex: 1 1 0" statt "auto"). Mit "auto" waere "Preise & Zahlung" schmal und "Inhalte & Zusammenarbeit" breit gewesen -- ungleiche Kacheln in einer Reihe, also genau das, was hier schon einmal bemaengelt wurde. "min-width: 0" ist dabei noetig, weil Flex-Elemente sonst nicht unter ihre Inhaltsbreite schrumpfen und die Reihe trotzdem umbrechen wuerde. Nachgemessen bei 700 / 900 / 1280 / 1440px: 5 Knoepfe, 1 Reihe, alle gleich breit UND gleich hoch. Unter 700px bleibt der Umbruch -- fuenf Spalten waeren auf einem Handy unlesbar schmal. 45/45 Handy-Abnahme weiterhin sauber. Co-Authored-By: Claude Opus 5 --- webdesign/faq.html | 20 ++++++++++++++++++++ webdesign/leistungen.html | 20 ++++++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/webdesign/faq.html b/webdesign/faq.html index fe343c0b..efceaacb 100644 --- a/webdesign/faq.html +++ b/webdesign/faq.html @@ -48,6 +48,26 @@ white-space: normal; text-align: center; line-height: 1.25; } .fq-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); } + + /* Ab 700px alle nebeneinander in EINER Reihe. + Rueckmeldung 22.08.2026: "alle neben einander bitte". Vorher passten + nur vier in die Zeile und die fuenfte rutschte allein darunter — das + sieht aus wie ein Versehen, nicht wie eine Gestaltung. + + "flex: 1 1 0" statt "auto": damit teilen sich alle fuenf den Platz zu + gleichen Teilen, unabhaengig von der Textlaenge. Mit "auto" waere + "Preise & Zahlung" schmal und "Inhalte & Zusammenarbeit" breit — + ungleiche Kacheln in einer Reihe, genau was hier nicht gewollt ist. + "min-width: 0" ist noetig, weil Flex-Elemente sonst nicht unter ihre + Inhaltsbreite schrumpfen und die Reihe doch wieder umbrechen wuerde. + Laengere Namen brechen dadurch innerhalb ihrer Kachel auf zwei + Zeilen; die Kacheln bleiben durch die Reihe trotzdem gleich hoch. + + Unter 700px bleibt es beim Umbruch — fuenf Spalten waeren auf einem + Handy unlesbar schmal. */ + @media (min-width: 700px) { + .fq-sprung a { flex: 1 1 0; min-width: 0; padding-left: .6rem; padding-right: .6rem; } + } diff --git a/webdesign/leistungen.html b/webdesign/leistungen.html index 4e30929f..30ddaa64 100644 --- a/webdesign/leistungen.html +++ b/webdesign/leistungen.html @@ -42,6 +42,26 @@ } .ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); } + /* Ab 700px alle nebeneinander in EINER Reihe. + Rueckmeldung 22.08.2026: "alle neben einander bitte". Vorher passten + nur vier in die Zeile und die fuenfte rutschte allein darunter — das + sieht aus wie ein Versehen, nicht wie eine Gestaltung. + + "flex: 1 1 0" statt "auto": damit teilen sich alle fuenf den Platz zu + gleichen Teilen, unabhaengig von der Textlaenge. Mit "auto" waere + "Preise & Zahlung" schmal und "Inhalte & Zusammenarbeit" breit — + ungleiche Kacheln in einer Reihe, genau was hier nicht gewollt ist. + "min-width: 0" ist noetig, weil Flex-Elemente sonst nicht unter ihre + Inhaltsbreite schrumpfen und die Reihe doch wieder umbrechen wuerde. + Laengere Namen brechen dadurch innerhalb ihrer Kachel auf zwei + Zeilen; die Kacheln bleiben durch die Reihe trotzdem gleich hoch. + + Unter 700px bleibt es beim Umbruch — fuenf Spalten waeren auf einem + Handy unlesbar schmal. */ + @media (min-width: 700px) { + .ls-sprung a { flex: 1 1 0; min-width: 0; padding-left: .6rem; padding-right: .6rem; } + } + /* scroll-margin-top: sonst verschwindet die Abschnittsüberschrift beim Anspringen unter der klebenden Kopfzeile. */ .ls-block { scroll-margin-top: 90px; }