Mobile layout adjustment

2026-03-08 09:01:10 +00:00
parent 6f4fa72a03
commit de3fc810ba
1 changed files with 14 additions and 4 deletions
--- a/hdyc-svelte/src/app.css
+++ b/hdyc-svelte/src/app.css
@@ -858,14 +858,24 @@ a:focus-visible {
  }
  .category-section__inner {
    gap: 1rem;
+    width: 100%;
+  }
+  .category-section .section-heading {
+    margin-bottom: 0.75rem;
+    text-align: center;
  }
  .category-grid {
-    width: min(960px, 100%);
+    width: 100%;
+    max-width: 540px;
+    margin-inline: auto;
+    grid-template-columns: repeat(2, minmax(140px, 1fr));
+    gap: clamp(0.7rem, 3vw, 1rem);
+    justify-content: center;
  }
  .category-grid .category-card {
-    flex: 0 1 clamp(150px, 40vw, 200px);
-    min-width: 150px;
-    max-width: 200px;
+    flex: none;
+    min-width: 0;
+    max-width: none;
  }
  .stats-row {
    gap: 1.5rem;