fix: adjust projects to respect screen width

bjerkio · Jun 18, 2024 · 4d95735 · 4d95735
1 parent 879f097
commit 4d95735
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/components/project-list-card.astro b/src/components/project-list-card.astro
@@ -33,9 +33,10 @@ const { data } = Astro.props;
 
 <style>
   .card {
+    width: 100%;
     background-color: hsl(var(--blue-base) 95%);
-    display: grid;
-    grid-template-columns: 2fr 1fr;
+    display: flex;
+    justify-content: space-between;
     padding: 1.5rem;
     border-radius: var(--border-radius);
     gap: 1.5rem;
@@ -51,7 +52,7 @@ const { data } = Astro.props;
 
   dl {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    text-align: end;
     gap: 1rem;
     margin: 0;
   }
@@ -63,4 +64,12 @@ const { data } = Astro.props;
   dd {
     margin: 0;
   }
+  @media (max-width: 640px) {
+    .card {
+      flex-direction: column;
+    }
+    dl {
+      text-align: start;
+    }
+  }
 </style>