From 1b43a7b4ff556ee4f61a3ecd57251bb50419cf24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Schr=C3=B6ter?= <dev@felschr.com>
Date: Wed, 4 Jan 2023 19:17:50 +0100
Subject: [PATCH] fix: fix grid item size on smaller screens

---
 src/pages/blog/index.tsx | 8 +++++++-
 src/pages/index.tsx      | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index b7795c3..c451ab9 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -24,9 +24,15 @@ const Post = ({ size = "normal", post }: PostProps) => {
   `
 
   const featuredImage = getImage(post.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!)
+  const isHighlight = size === "highlight"
 
   return (
-    <Grid item xs={size === "highlight" ? 12 : 4}>
+    <Grid
+      item
+      xs={12}
+      sm={isHighlight ? 12 : 6}
+      md={isHighlight ? 12 : 4}
+    >
       <Card>
         {featuredImage && (
           <CardMedia
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 95795c8..2b338ed 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -84,7 +84,7 @@ const IndexPage = () => {
     <Layout pageTitle="Home">
       <Grid container spacing={2} alignItems="stretch">
         {content.map(({ title, icon, description }) =>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <Card>
               <CardContent>
                 <Title Icon={icon} title={title} />