Improve landing page responsiveness (#522)

* Improve landing page responsiveness * Reduce width of cards on sm breakpoint * Remove redundant flex component * Reduce card size further for sm breakpoint
DevelopingSpace · Apr 5, 2023 · 5165658 · 5165658
1 parent 8c64a6d
commit 5165658
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/app/routes/__index/index.tsx b/app/routes/__index/index.tsx
@@ -17,24 +17,23 @@ export default function IndexRoute() {
       <Flex
         flexDirection="column"
         alignItems="center"
-        width="100%"
+        width={{ base: 'full', sm: '80%' }}
         paddingY={{ base: '2', md: '7' }}
         gap={{ md: '16' }}
       >
-        <Flex width={{ base: '100%', md: '50%' }} textAlign="center" padding="5">
-          <Text fontSize={{ base: 'sm', md: 'lg' }}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-            has been the industry's standard dummy text ever since the 1500s, when an unknown
-            printer took a galley of type and scrambled it to make a type specimen book.
-          </Text>
-        </Flex>
+        <Text fontSize={{ base: 'sm', md: 'lg' }} textAlign="center" padding="5">
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+          been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+          a galley of type and scrambled it to make a type specimen book.
+        </Text>
       </Flex>
       <Flex
-        flexDirection={{ base: 'column', sm: 'row' }}
+        flexDirection={{ base: 'column', md: 'row' }}
         justifyContent="center"
         paddingY="10"
         paddingX={{ base: '10', md: '5' }}
         gap={{ base: '5', lg: '10' }}
+        width={{ base: 'full', sm: 'md' }}
       >
         <LandingPageCard
           path="/dns-records"