fix responsive padding issues

components/common/footer/index.js

@@ -183,6 +183,7 @@ export default class FooterBar extends React.Component {
               justify="center"
               width={[1, 1, 1 / 2]}
               p={[2, 1]}
+              px={[2, 3]}
             >
               <Title>
                 We are constanly updating our platform. If you would like to

pages/index.js

@@ -5,6 +5,7 @@ import take from 'lodash.take';
 import Link from 'next/link';
 
 import { Container, baseButton } from '../utils/base.styles';
+import Hide from '../utils/hide';
 import { listOfSubjects } from '../utils/mock-data';
 import Layout from '../components/common/layout';
 
@@ -79,7 +80,7 @@ const SpaceSection = styled.section`
   & .box {
     position: relative;
     z-index: 2;
-    @media (max-width: 1000px) {
+    @media (max-width: 831px) {
       text-align: center;
     }
   }
@@ -96,7 +97,16 @@ const EventsSection = styled.section`
   & .box {
     position: relative;
     z-index: 2;
-    @media (max-width: 1000px) {
+    & img {
+      width: 100%;
+      @media (max-width: 831px) {
+        width: 50%;
+      }
+      @media (max-width: 600px) {
+        width: 100%;
+      }
+    }
+    @media (max-width: 831px) {
       text-align: center;
     }
   }
@@ -118,7 +128,7 @@ const Title = styled.h2`
   font-size: 2rem;
   font-weight: 400;
   color: ${props => (props.inverted ? '#7657fb' : '#fff')};
-  @media (max-width: 1000px) {
+  @media (max-width: 831px) {
     font-size: 1.8rem;
     text-align: center;
   }
@@ -132,7 +142,7 @@ const SubTitle = styled.h3`
   font-size: ${props => (props.small ? '1rem' : '1.2rem')};
   font-weight: 400;
   color: ${props => (props.inverted ? '#222' : '#fff')};
-  @media (max-width: 1000px) {
+  @media (max-width: 831px) {
     font-size: 1rem;
     text-align: center;
   }
@@ -144,13 +154,13 @@ const SubTitle = styled.h3`
 
 const SpaceOverlay = styled.div`
   background: #6f19ed;
-  height: 220px;
+  height: 200px;
   width: 100%;
   position: absolute;
   z-index: 1;
   bottom: 0;
   left: 0;
-  @media (max-width: 832px) {
+  @media (max-width: 831px) {
     display: none;
   }
 `;
@@ -170,14 +180,14 @@ export default () => (
     <LearnSection>
       <Container>
         <Flex justify="center" align="center" direction="column">
-          <Box width={1} pb={[1, 2]} pt={[2, 3]} px={[2, 0]}>
+          <Box width={1} pb={[1, 2]} pt={[2, 3]} px={[2, 3]}>
             <Title inverted>Open Source Learning Guides</Title>
             <SubTitle inverted>
               Our guides are crowd-sourced recommendations of free online
               resources to learn any technology
             </SubTitle>
           </Box>
-          <Box width={1} pb={[2, 3]} pt={[1]} px={[3, 2, 0]}>
+          <Box width={1} pb={[2, 3]} pt={[1]} px={[2, 0]}>
             <Flex justify="center" align="center" wrap>
               {take(listOfSubjects, 6).map(subject => {
                 return (
@@ -221,7 +231,7 @@ export default () => (
             className="box"
             width={[1, 1, 1 / 2]}
             py={[0, 2, 3]}
-            px={[2, 4, 2]}
+            px={[2, 4, 3]}
           >
             <Title>Offline Co-Learning Spaces</Title>
             <SubTitle small>
@@ -252,7 +262,7 @@ export default () => (
             width={[1, 1, 1 / 2]}
             pt={4}
             pb={[0, 1, 4]}
-            px={[3, 4, 2]}
+            px={[3, 4, 3]}
           >
             <img className="space__img" src="/static/space.svg" />
           </Box>
@@ -264,9 +274,17 @@ export default () => (
       <Container>
         <Flex align="center" justify="center" wrap>
           <Box order={[2, 2, 1]} width={[1, 1, 1 / 2]} px={[4, 4, 3]}>
-            <img src="/static/events.png" alt="events__pic" />
+            <Hide sm xs>
+              <img src="/static/events.png" alt="events__pic" />
+            </Hide>
           </Box>
-          <Box order={1} width={[1, 1, 1 / 2]} px={[1, 3]} pt={[3, 4, 0]}>
+          <Box
+            order={1}
+            width={[1, 1, 1 / 2]}
+            px={[2, 3]}
+            pt={[3, 4, 0]}
+            pb={[4, 4, 0]}
+          >
             <Title>Online & Offline Events</Title>
             <SubTitle small>
               We do frequent online and offline events, covering broad range of
@@ -275,7 +293,10 @@ export default () => (
               collaboration. We also partner with local comunities to help them
               reach a wider audience.
             </SubTitle>
-            <Box className="box" width={[1]} pt={[2]}>
+            <Box className="box" width={[1]} pt={[2]} px={[3, 0]}>
+              <Hide md lg>
+                <img src="/static/events.png" alt="events__pic" />
+              </Hide>
               <Link href={'/events'}>
                 <Button>VIEW ALL EVENTS</Button>
               </Link>

utils/hide.js

@@ -0,0 +1,26 @@
+import styled from 'react-emotion';
+
+export const breakpoints = {
+  xs: '@media screen and (max-width: 40em)',
+  sm: '@media screen and (min-width: 40em) and (max-width: 52em)',
+  md: '@media screen and (min-width: 52em) and (max-width: 64em)',
+  lg: '@media screen and (min-width: 64em)',
+};
+
+export const hidden = key => props =>
+  props[key]
+    ? {
+        [breakpoints[key]]: {
+          display: 'none',
+        },
+      }
+    : null;
+
+export const xs = hidden('xs');
+export const sm = hidden('sm');
+export const md = hidden('md');
+export const lg = hidden('lg');
+
+const Hide = styled.div([], xs, sm, md, lg);
+
+export default Hide;