fix layouting

KATITB22 · Aug 26, 2022 · e47617c · e47617c
1 parent 20b5b73
commit e47617c
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 9 deletions.
diff --git a/src/components/Homepage/Event/index.tsx b/src/components/Homepage/Event/index.tsx
@@ -21,7 +21,7 @@ const Event: () => JSX.Element = () => {
   ];
 
   return (
-    <Box backgroundColor="#FFEBB0" py={5} overflow="hidden">
+    <Box backgroundColor="#FFEBB0" py={5} overflowX="hidden">
       <Flex
         justifyContent={{ base: 'center', lg: 'space-around' }}
         alignItems="center"

diff --git a/src/components/Homepage/UnitRecommendation/_Card.tsx b/src/components/Homepage/UnitRecommendation/_Card.tsx
@@ -79,6 +79,7 @@ const Card = ({
           h="25%"
           alignItems="center"
           justifyContent="center"
+          px="3"
         >
           <Heading
             opacity={{
@@ -89,6 +90,11 @@ const Card = ({
             transition="200ms ease-out"
             color="#eeeeee"
             fontWeight="400"
+            fontSize={{
+              base: 'lg',
+              md: '2xl'
+            }}
+            textAlign="center"
           >
             {label}
           </Heading>

diff --git a/src/components/Homepage/UnitRecommendation/_SwiperButton.tsx b/src/components/Homepage/UnitRecommendation/_SwiperButton.tsx
@@ -34,7 +34,7 @@ const SwiperButton = ({
       cursor="pointer"
     >
       <Text
-        fontSize="21px"
+        fontSize="sm"
         fontWeight={hover || position === index ? 'bold' : ''}
         position="relative"
       >

diff --git a/src/components/Homepage/UnitShowcase/_Card.tsx b/src/components/Homepage/UnitShowcase/_Card.tsx
@@ -12,12 +12,16 @@ const Card = ({ img, label, onClick }: ICard) => (
     bg="#FFFFFF"
     boxShadow="4px 9px 28px rgba(0, 0, 0, 0.25);"
     h={{
-      base: '15em',
-      md: '22.5em'
+      base: '13em',
+      md: '14em',
+      lg: '18em',
+      xl: '20em'
     }}
     w={{
       base: '12em',
-      md: '19.5em'
+      md: '12em',
+      lg: '16em',
+      xl: '18em'
     }}
     _hover={{
       boxShadow: '4px 9px 28px rgba(0, 0, 0, 0.5);',
@@ -33,14 +37,23 @@ const Card = ({ img, label, onClick }: ICard) => (
         src={img}
         draggable="false"
         w={{
-          base: '8em',
-          lg: '11em'
+          base: '5em',
+          md: '7em',
+          lg: '9em'
         }}
         borderTopRadius="10px"
       />
     </Center>
     <Flex h="30%" justifyContent="center" alignItems="center">
-      <Text fontFamily="Subheading" fontSize="3xl" textAlign="center">
+      <Text
+        fontFamily="Subheading"
+        fontSize={{
+          base: 'lg',
+          md: 'xl',
+          lg: '3xl'
+        }}
+        textAlign="center"
+      >
         {label}
       </Text>
     </Flex>

diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
@@ -43,6 +43,7 @@ const Footer = () => (
       py={5}
       px={{ base: 5, md: 16 }}
       flexDirection={{ base: 'column', md: 'row' }}
+      overflowX="hidden"
     >
       <Box display="flex" flexDirection="column" alignSelf="center">
         <Link to="/">

diff --git a/src/components/common/sponsorMedpar/partner.tsx b/src/components/common/sponsorMedpar/partner.tsx
@@ -25,7 +25,7 @@ const getSponsorHeight = (size: string) => {
 };
 
 const Partner: React.FC<Props> = ({ partners }: Props) => (
-  <Box maxWidth="container.xl">
+  <Box maxWidth="container.xl" overflowX="hidden">
     {Object.keys(partners).map((key) => (
       <Flex
         key={`size-${key}`}

diff --git a/src/index.css b/src/index.css
@@ -30,3 +30,7 @@
   cursor: pointer;
   visibility: hidden;
 }
+
+body {
+  overflow-x: hidden;
+}