fix: floating footer problem solved

Franqsanz · Aug 13, 2024 · 64595b6 · 64595b6
1 parent 0af66bd
commit 64595b6
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 33 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -64,41 +64,44 @@ export function Footer() {
 
   return (
     <>
-      <Flex
-        as='footer'
-        bg={bgFooter}
-        py='5'
-        justify='center'
-        direction='column'
-        align='center'
-        fontSize='sm'
-      >
-        Hecho con ❤ por Franqsanz
-        <Link
-          as={NavLink}
-          to='/privacy-policies'
-          mt='2'
-          textDecoration='underline'
-          _hover={{ textDecoration: 'none' }}
-        >
-          Políticas de Privacidad
-        </Link>
-        <Box display={{ base: 'none', md: 'block' }} fontSize='14px' my='2'>
-          2024 XBuniverse
-        </Box>
+      <Box mt='auto'>
         <Flex
-          mt={{ base: 4, md: 2 }}
+          as='footer'
+          bg={bgFooter}
+          mt='20'
+          py='5'
+          justify='center'
+          direction='column'
           align='center'
-          fontSize='xs'
-          bg='black'
-          p='1.5'
-          rounded='lg'
-          color='#EAEAEA'
+          fontSize='sm'
         >
-          <Box mr='2'>Estado de conexión</Box>
-          {connectionState}
+          Hecho con ❤ por Franqsanz
+          <Link
+            as={NavLink}
+            to='/privacy-policies'
+            mt='2'
+            textDecoration='underline'
+            _hover={{ textDecoration: 'none' }}
+          >
+            Políticas de Privacidad
+          </Link>
+          <Box display={{ base: 'none', md: 'block' }} fontSize='14px' my='2'>
+            2024 XBuniverse
+          </Box>
+          <Flex
+            mt={{ base: 4, md: 2 }}
+            align='center'
+            fontSize='xs'
+            bg='black'
+            p='1.5'
+            rounded='lg'
+            color='#EAEAEA'
+          >
+            <Box mr='2'>Estado de conexión</Box>
+            {connectionState}
+          </Flex>
         </Flex>
-      </Flex>
+      </Box>
     </>
   );
 }
diff --git a/src/components/MySimpleGrid.tsx b/src/components/MySimpleGrid.tsx
@@ -14,7 +14,6 @@ export function MySimpleGrid({ width = '8xl', children }: SimpleGridType) {
       <SimpleGrid
         as='section'
         maxW='full'
-        minH='100vh'
         w={width}
         columns={{ base: 2, md: 3, lg: 4, '2xl': 5 }}
         justifyItems='center'

diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -234,7 +234,7 @@ export function Profile() {
       </Flex>
       <Flex
         direction={{ base: 'column', md: 'row' }}
-        maxW='1700px'
+        maxW={{ base: '1260px', '2xl': '1560px' }}
         m='0 auto'
         px={{ base: 5, md: 10, '2xl': 16 }}
       >

diff --git a/theme.ts b/theme.ts
@@ -37,6 +37,11 @@ export default extendTheme({
           zIndex: 2,
         },
       },
+      '#root': {
+        display: { base: 'block', lg: 'flex' },
+        flexDirection: 'column',
+        minHeight: '100vh',
+      },
       h1: {
         fontWeight: 'extrabold',
       },