Update responsive layout and styles

Xcceleran-do · Feb 9, 2024 · f32817a · f32817a
1 parent bc9126a
commit f32817a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/Blog/BlogCard.astro b/src/components/Blog/BlogCard.astro
@@ -64,10 +64,16 @@ function stripHtml(dirtyString: string) {
     color: var(--gray-6, #f2f2f2);
   }
 
+  @media screen and (max-width: 1127px) {
+    .card {
+      margin: auto;
+    }
+  }
   @media screen and (max-width: 768px) {
     .card {
       display: flex;
       flex-direction: column-reverse;
+      margin: auto;
     }
     .card-img {
       max-width: 100%;

diff --git a/src/layouts/ResponsiveCards.astro b/src/layouts/ResponsiveCards.astro
@@ -14,7 +14,7 @@ const { gap = "1rem", width = "402px" } = Astro.props;
 <style define:vars={{ gap, width }}>
   .card-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(425px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(475px, 1fr));
     gap: 25px;
   }
 
@@ -27,4 +27,3 @@ const { gap = "1rem", width = "402px" } = Astro.props;
     }
   }
 </style>
-