From 0a4b46b56e1ddfb37098f7ff6664a56569f84d30 Mon Sep 17 00:00:00 2001
From: justice chimobi <chimobi.justice@gmail.com>
Date: Sat, 28 Sep 2024 23:52:01 +0100
Subject: [PATCH] Fix: card mobile

---
 src/components/ArticleCard/LatestArticle.tsx | 6 +++---
 src/pages/Articles/index.tsx                 | 2 +-
 src/pages/Home/Public/Articles/index.tsx     | 7 +++----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/ArticleCard/LatestArticle.tsx b/src/components/ArticleCard/LatestArticle.tsx
index a26763e..4e7ad9b 100644
--- a/src/components/ArticleCard/LatestArticle.tsx
+++ b/src/components/ArticleCard/LatestArticle.tsx
@@ -32,19 +32,19 @@ const LatestArticleCard: FunctionComponent<IProps> = ({
   CTAText
 }) => {
   return (
-    <Card>
+    <Card  maxW={"md"}>
       <CardBody>
         <Box>
           <Image
             src={articleImage}
-            alt='Green double couch with wooden legs'
+            alt={title}
             borderRadius='lg'
             width={"100%"}
             height={"200px"}
             objectFit={"cover"}
           />
         </Box>
-        <Stack mt='6' spacing='3'>
+        <Stack mt='6' spacing={2}>
           <Text fontSize={"14px"} color={"#0009"}>{date}</Text>
           <Heading
             as="h4"
diff --git a/src/pages/Articles/index.tsx b/src/pages/Articles/index.tsx
index 35817c8..aebaa22 100644
--- a/src/pages/Articles/index.tsx
+++ b/src/pages/Articles/index.tsx
@@ -72,7 +72,7 @@ const Articles: FunctionComponent = () => {
         )}
       </Box>
 
-      <SimpleGrid minChildWidth="370px" spacing={4}>
+      <SimpleGrid minChildWidth="350px" spacing={3}>
         {pinArticles?.map((article: any, index: number) => (
           <LatestArticleCard
             key={index}
diff --git a/src/pages/Home/Public/Articles/index.tsx b/src/pages/Home/Public/Articles/index.tsx
index 4b68024..df929cb 100644
--- a/src/pages/Home/Public/Articles/index.tsx
+++ b/src/pages/Home/Public/Articles/index.tsx
@@ -19,9 +19,11 @@ const HomeArticles: FunctionComponent = () => {
         Lat<Text as="span" color={colors.primary}>est</Text> Ar<Text as="span" color={colors.primary}>tic</Text>les
       </Heading>
 
+      {isLoading && <Skeleton />}
+
       {articles && isSuccess && (
         <>
-          <SimpleGrid minChildWidth="370px" spacing={4}>
+          <SimpleGrid minChildWidth="350px" spacing={3}>
             {articles?.map((article: any, index: any) => (
               <LatestArticleCard
                 key={index}
@@ -51,9 +53,6 @@ const HomeArticles: FunctionComponent = () => {
           </Box>
         </>
       )}
-
-      {isLoading && <Skeleton />}
-
     </Box>
   )
 }