From 1b638ab7ad1278000e2790476f52354f4d82736a Mon Sep 17 00:00:00 2001
From: Benjamin Bach <benjamin@overtag.dk>
Date: Mon, 3 Apr 2023 00:06:38 +0200
Subject: [PATCH] Make grids reflow on narrow displays

---
 .../datacoop2020/assets/static/css/style.scss | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/themes/datacoop2020/assets/static/css/style.scss b/themes/datacoop2020/assets/static/css/style.scss
index 961089e..d90dd48 100644
--- a/themes/datacoop2020/assets/static/css/style.scss
+++ b/themes/datacoop2020/assets/static/css/style.scss
@@ -234,6 +234,11 @@ aside > footer img:hover {
   margin: 0;
   display: grid;
   grid-template-columns: max-content 1fr;
+  
+  @media(max-width: 700px) {
+    grid-template-columns: 100%;
+  }
+  
   align-items: start;
   gap: 20px;
   dt {
@@ -293,6 +298,23 @@ dl.dl-services,
     .badge-status {
       margin-bottom: 40px;
     }
+    @media(max-width: 700px) {
+      grid-template-columns: min-content auto;
+      .badge-icon {
+          grid-column-start   : 1;
+          grid-column-end     : 2;
+      }
+      .badge-name {
+          grid-column-start   : 2;
+          grid-column-end     : 3;
+          
+      }
+      .badge-description {
+          grid-column-start   : 1;
+          grid-column-end     : 3;
+      }
+    }
+    
    
 }
 
@@ -317,6 +339,22 @@ dl.dl-services,
         margin-top: 20px;
       }
     }
+    @media(max-width: 700px) {
+      grid-template-columns: min-content auto;
+      .badge-icon {
+          grid-column-start   : 1;
+          grid-column-end     : 2;
+      }
+      .badge-name {
+          grid-column-start   : 2;
+          grid-column-end     : 3;
+          
+      }
+      .badge-description {
+          grid-column-start   : 1;
+          grid-column-end     : 3;
+      }
+    }
 }
 
 .badge-status {