From ee69892058bb6f2d21f4fb98ba425737b5d0cab8 Mon Sep 17 00:00:00 2001 From: tleininger Date: Thu, 1 Oct 2026 19:06:54 +0200 Subject: [PATCH] fix buttons --- Elternbeirat.Web/Features/Home/Home.razor.css | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/Elternbeirat.Web/Features/Home/Home.razor.css b/Elternbeirat.Web/Features/Home/Home.razor.css index d922e29..c411eb2 100644 --- a/Elternbeirat.Web/Features/Home/Home.razor.css +++ b/Elternbeirat.Web/Features/Home/Home.razor.css @@ -93,6 +93,26 @@ outline-color: var(--color-focus-inverse); } +/* On a phone the buttons used to wrap onto a row each: two wide blocks stacked, + far too heavy for the top of the page. Instead they share one row in equal + columns -- the same buttons as on the desktop, just side by side and a little + tighter. Short labels ("Termine", "Kontakt") fit on one line; a longer one + wraps inside its button (centred) rather than pushing the other off the row. */ +@media (max-width: 40rem) { + .hero-actions { + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr; + gap: var(--space-2); + } + + .hero .btn { + justify-content: center; + padding: var(--space-2) var(--space-3); + text-align: center; + } +} + /* --- Next event --------------------------------------------------------------- A card on the gradient: the regular card surface, so its text uses the normal tokens and adapts to dark mode by itself. The whole card is one link to the