Make roadmaps page responsive

components/page-header.tsx

@@ -11,10 +11,18 @@ export function PageHeader(props: PageHeaderProps) {
   const { title, subtitle, children } = props;
 
   return (
-    <Box pt='45px' pb='30px' borderBottomWidth={1} mb='30px'>
+    <Box pt={['20px', '20px', '45px']} pb={['15px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
       <Container maxW='container.md' position='relative'>
-        <Heading as='h1' color='black' fontSize='35px' fontWeight={700} mb='5px'>{title}</Heading>
-        <Text fontSize='15px'>{subtitle}</Text>
+        <Heading
+          as='h1'
+          color='black'
+          fontSize={['25px', '25px', '35px']}
+          fontWeight={700}
+          mb={['2px', '2px', '5px']}
+        >
+          {title}
+        </Heading>
+        <Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
       </Container>
 
       {children && (

pages/roadmaps/index.tsx

@@ -16,7 +16,7 @@ export default function Roadmaps() {
           subtitle={'Step by step guides and paths to learn different tools or technologies'}
         />
         <Container maxW='container.md' position='relative'>
-          <SimpleGrid columns={{ md: 2 }} mb='30px' spacing='15px'>
+          <SimpleGrid columns={[1, 1, 2, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
             <RoadmapGridItem
               colorIndex={0} title={'Frontend'}
               subtitle={'Step by step guide to becoming a frontend developer in 2021'}