From b8503f81c65dd636a664b14e468db95289f4b659 Mon Sep 17 00:00:00 2001
From: Param Harrison <paramanantham@live.com>
Date: Sun, 24 May 2020 22:22:02 +0300
Subject: [PATCH] feat: PWA with responsiveness

---
 src/components/footer.js   | 12 ++++++++++--
 src/components/header.js   |  2 +-
 src/components/layout.js   | 10 ++--------
 src/components/products.js |  2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/footer.js b/src/components/footer.js
index e8d66c0..631b4aa 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -12,14 +12,22 @@ const FooterLink = styled(StyledLink)`
 const Footer = () => {
   return (
     <Box as="header" borderTop="1px solid" borderColor="gray.700" py="4">
-      <Flex width="100%" maxW="720px" m="0 auto" alignItems="center">
+      <Flex
+        width="100%"
+        maxW="720px"
+        m="0 auto"
+        px="2"
+        alignItems="center"
+        flexDirection={["column", "row"]}
+        justifyContent={["center", "flex-start"]}
+      >
         <Box>
           <Text as="span">© {new Date().getFullYear()} </Text>
           <Text as="span" color="red.400">
             learnwithparam.com
           </Text>
         </Box>
-        <Box as="nav" ml="auto">
+        <Box as="nav" ml={["0", "auto"]}>
           <FooterLink to="/support/terms-and-conditions">
             Terms and Conditions
           </FooterLink>
diff --git a/src/components/header.js b/src/components/header.js
index 9fd7810..76b6358 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -29,7 +29,7 @@ const Header = ({ siteTitle }) => {
 
   return (
     <Box as="header" borderBottom="1px solid" borderColor="gray.700" py="3">
-      <Flex width="100%" maxW="720px" m="0 auto" alignItems="center">
+      <Flex width="100%" maxW="720px" m="0 auto" px="2" alignItems="center">
         <Box>
           <Heading as="h1" m="0" fontSize="32px">
             <LogoLink to="/">
diff --git a/src/components/layout.js b/src/components/layout.js
index a8d25c9..d59f9e9 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -28,15 +28,9 @@ const Layout = ({ children }) => {
   return (
     <Box color="white">
       <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
-        }}
-      >
+      <Box p="2">
         <main>{children}</main>
-      </div>
+      </Box>
       <Footer />
     </Box>
   );
diff --git a/src/components/products.js b/src/components/products.js
index 20548e9..b735a2b 100644
--- a/src/components/products.js
+++ b/src/components/products.js
@@ -18,7 +18,7 @@ const Products = ({ products }) => {
           </Text>
         </Text>
       </Box>
-      <Grid templateColumns="repeat(2, 1fr)" gap={6}>
+      <Grid templateColumns={["repeat(1, 1fr)", "repeat(2, 1fr)"]} gap={6}>
         {products.map(({ node: product }) => (
           <Product product={product} key={product.name} />
         ))}