css improvements for the mobile view

gatsby-browser.js

@@ -4,4 +4,4 @@
  * See: https://www.gatsbyjs.org/docs/browser-apis/
  */
 
-// You can delete this file if you're not using it
+import "@styles/global.css";

src/components/global.js

@@ -30,7 +30,10 @@ export const Container = styled.div`
 `;
 
 export const Section = styled.section`
-  padding: 7rem 0;
+  padding: 1rem 0;
+  @media (min-width: ${props => props.theme.screen.md}) {
+    padding: 2rem 0;
+  }
 
   ${props =>
     props.accent && `background-color: ${props.theme.color.black.lighter}`}

src/components/sections/Gallery.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import { StaticQuery, graphql } from 'gatsby';
 import Img from 'gatsby-image';
 
@@ -71,7 +70,7 @@ const Gallery = () => (
       <Section id="gallery">
         <Container>
           <h1 style={{ marginBottom: '3rem' }}>Gallery</h1>
-          <Grid>
+          <div className="gallery">
             {GALLERY.map(({ name, image, url }) => {
               const img = data.allFile.edges.find(
                 ({ node }) => node.relativePath === image
@@ -84,22 +83,11 @@ const Gallery = () => (
                 </ExternalLink>
               );
             })}
-          </Grid>
+          </div>
         </Container>
       </Section>
     )}
   />
 );
 
-const Grid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 200px);
-  grid-gap: 24px;
-
-  > a {
-    text-decoration: none;
-    color: inherit;
-  }
-`;
-
 export default Gallery;

src/components/sections/Header.js

@@ -7,7 +7,7 @@ import { Container, Button } from '@components/global';
 const Header = props => (
   <header style={{ padding: '3rem 0', marginTop: '5rem' }}>
     <Container>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div className="header">
         <div style={{ width: 300 }}>
           <Image />
         </div>

src/components/sections/Schedule.js

@@ -92,7 +92,7 @@ class Schedule extends React.PureComponent {
     return (
       <Section id="schedule" accent>
         <Container>
-          <h1 style={{ marginBottom: '4rem', textAlign: 'center' }}>
+          <h1 style={{ marginBottom: '2rem', textAlign: 'center' }}>
             Schedule
           </h1>
           <Tabs num={SCHEDULE.length}>
@@ -121,13 +121,14 @@ class Schedule extends React.PureComponent {
 }
 
 const Tabs = styled.div`
-  display: grid;
-  grid-template-columns: ${props => `repeat(${props.num}, 200px)`};
-  grid-gap: 32px;
+  display: flex;
   justify-content: center;
+  flex-wrap: wrap;
 `;
 
 const Tab = styled(Button)`
+  margin: 10px;
+  padding: 10px 4rem;
   background-color: ${props =>
     props.theme.color.blue[props.active ? 'dark' : 'regular']};
 

src/components/sections/Sponsors.js

@@ -29,7 +29,7 @@ const SPONSORS = [
 const Sponsors = () => (
   <Section id="sponsors">
     <Container>
-      <h1 style={{ marginBottom: '4rem', textAlign: 'center' }}>Sponsors</h1>
+      <h1 style={{ marginBottom: '2rem', textAlign: 'center' }}>Sponsors</h1>
       <Flex>
         {SPONSORS.map(({ logo, link }) => (
           <Sponsor href={link} key={link}>
@@ -49,11 +49,13 @@ const Flex = styled.div`
 
 const Sponsor = styled(ExternalLink)`
   max-width: 160px;
-  margin-bottom: 2rem;
+  margin: 1rem;
 
-  &:not(:last-child) {
-    margin-right: 4rem;
-  }
+  @media (min-width: ${props => props.theme.screen.md}) {
+    &:not(:last-child) {
+      margin-right: 4rem;
+    }
+  }  
 
   > svg {
     width: 100%;

src/styles/global.css

@@ -0,0 +1,21 @@
+.header{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.gallery{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.gallery > a{
+    display:block;
+    text-decoration: none;
+    color: inherit;
+    max-width:340px;
+    width:90%;
+    text-align:center;    
+}