diff --git a/components/page-header.tsx b/components/page-header.tsx
index b3ee21662..e307bd521 100644
--- a/components/page-header.tsx
+++ b/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 && (
diff --git a/pages/roadmaps/index.tsx b/pages/roadmaps/index.tsx
index df45adde5..4dfa8d901 100644
--- a/pages/roadmaps/index.tsx
+++ b/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'}