Merge pull request #22 from chimobi-justice/fix/card-mobile

Fix: card mobile
chimobi-justice · Sep 28, 2024 · bad570b · bad570b
2 parents caed546 + 0a4b46b
commit bad570b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>
   )
 }