Use a vertical layout for logos on narrow screens (#47)

sourcebots · Aug 4, 2024 · 2823075 · 2823075
1 parent 88018ab
commit 2823075
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/index.scss b/src/index.scss
@@ -43,9 +43,13 @@ header {
 
 section#logos {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: center;
-    column-gap: 1rem;
+
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    grid-auto-rows: 1fr;
+
+    place-items: center;
+    gap: 1rem;
 
     img {
         display: block;
@@ -57,6 +61,14 @@ section#logos {
             height: 75px;
         }
     }
+
+    @media (width < 600px) {
+        grid-auto-flow: row;
+
+        img {
+            max-height: 8vh;
+        }
+    }
 }
 
 section {