Responsive layout

src/components/tutorial/CalenderExample.tsx

@@ -72,7 +72,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
   return (
     <VStack h="8.5rem" w="100%" spacing={0}>
       <HStack
-        px={6}
+        px={{ base: 1, sm: 2, md: 6 }}
         spacing={0}
         w="100%"
         h="auto"
@@ -108,7 +108,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
           );
         })}
       </HStack>
-      <SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
+      <SimpleGrid px={{ base: 1, sm: 2, md: 6 }} w="100%" h="100%" columns={7} alignItems="center">
         {currWeek.map((day: MonthDay) => {
           const { date, isOverflow, overflowDirection } = day;
 

src/components/tutorial/index.tsx

@@ -56,8 +56,9 @@ const Tutorial = ({
         justifyContent="center"
         alignContent="center"
         my={8}
-        mx={4}
+        mx={{ base: 0, sm: 2, md: 4 }}
-        p={4}
+        py={4}
+        px={{ base: 0, sm: 2, md: 4 }}
         bg="gray.700"
       >
         <VStack
@@ -97,7 +98,7 @@ const Tutorial = ({
               w="100%"
               justifyContent="start"
               alignContent="center"
-              spacing={0}
+              spacing={1}
             >
               <Text>
                 {
@@ -139,7 +140,7 @@ const Tutorial = ({
             w="100%"
             justifyContent="start"
             alignContent="center"
-            spacing={2}
+            spacing={1}
           >
             <Text>
               {