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 <[email protected]>
This commit is contained in:
@@ -48,6 +48,26 @@
|
|||||||
white-space: normal; text-align: center; line-height: 1.25;
|
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); }
|
.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; }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="wd">
|
<body class="wd">
|
||||||
|
|||||||
@@ -42,6 +42,26 @@
|
|||||||
}
|
}
|
||||||
.ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }
|
.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
|
/* scroll-margin-top: sonst verschwindet die Abschnittsüberschrift beim
|
||||||
Anspringen unter der klebenden Kopfzeile. */
|
Anspringen unter der klebenden Kopfzeile. */
|
||||||
.ls-block { scroll-margin-top: 90px; }
|
.ls-block { scroll-margin-top: 90px; }
|
||||||
|
|||||||
Reference in New Issue
Block a user