Added Responsive Design

damianfanaro · Aug 13, 2024 · ef218d1 · ef218d1
1 parent 9a3eaa4
commit ef218d1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/Blog.tsx b/src/Blog.tsx
@@ -6,7 +6,7 @@ const Blog = () => {
   const { t } = useTranslation()
 
   return (
-    <Box id="blog" py={10} px={{ base: 4, md: 8 }} h="100vh">
+    <Box id="blog" py={10} px={{ base: 4, md: 8 }} h={{ base: 'fit-content', md: '100vh' }}>
       <Box mb={6} mt="6vh" ml="10vw">
         <Heading as="h2" size="lg" mb={4} textAlign="left">
           {t('blog')}
@@ -15,20 +15,20 @@ const Blog = () => {
           {t('myLinkedInArticles')}
         </Text>
       </Box>
-      <Box ml="10vw">
+      <Box ml={{ base: '2vw', md: '10vw' }}>
         <Grid templateColumns="repeat(auto-fit, minmax(300px, 1fr))" justifyContent="center" alignItems="center" w="100%">
-          <GridItem display="flex" justifyContent="center" maxW="350px" height="auto">
-            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" height="450px" boxShadow="md">
+          <GridItem display="flex" justifyContent="center" maxW="350px" h={{ base: '250px', md: 'auto' }} mb={{ base: '20px', md: '0' }}>
+            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" h={{ base: '250px', md: '450px' }}>
               <LinkedInPost1 />
             </Box>
           </GridItem>
-          <GridItem display="flex" justifyContent="center" maxW="350px" height="auto">
-            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" height="450px" boxShadow="md">
+          <GridItem display="flex" justifyContent="center" maxW="350px" h={{ base: '250px', md: 'auto' }} mb={{ base: '20px', md: '0' }}>
+            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" h={{ base: '250px', md: '450px' }}>
               <LinkedInPost2 />
             </Box>
           </GridItem>
-          <GridItem display="flex" justifyContent="center" maxW="350px" height="auto">
-            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" height="450px" boxShadow="md">
+          <GridItem display="flex" justifyContent="center" maxW="350px" h={{ base: '250px', md: 'auto' }}>
+            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" h={{ base: '250px', md: '450px' }}>
               <LinkedInPost3 />
             </Box>
           </GridItem>

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -55,17 +55,17 @@ const NavBar = () => {
               <DrawerBody>
                 <VStack spacing={4}>
                   <Link to="inicio" smooth={true} offset={-70} duration={500} onClick={onClose}>
-                    <Text _hover={linkHoverStyle} color="gray.800" cursor="pointer">
+                    <Text _hover={linkHoverStyle} color="gray.100" cursor="pointer">
                       {t('inicio')}
                     </Text>
                   </Link>
                   <Link to="blog" smooth={true} offset={-70} duration={500} onClick={onClose}>
-                    <Text _hover={linkHoverStyle} color="gray.800" cursor="pointer">
+                    <Text _hover={linkHoverStyle} color="gray.100" cursor="pointer">
                       {t('blog')}
                     </Text>
                   </Link>
                   <Link to="contacto" smooth={true} offset={-70} duration={500} onClick={onClose}>
-                    <Text _hover={linkHoverStyle} color="gray.800" cursor="pointer">
+                    <Text _hover={linkHoverStyle} color="gray.100" cursor="pointer">
                       {t('contacto')}
                     </Text>
                   </Link>