grid for partner

3 files changed, 31 insertions, 14 deletions

diff --git a/src/components/LandingPage/PartnerList.js b/src/components/LandingPage/PartnerList.js
index 297b1ba..33abee7 100644
--- a/src/components/LandingPage/PartnerList.js
+++ b/src/components/LandingPage/PartnerList.js
@@ -2,58 +2,72 @@ import React from "react";
 import styled from 'styled-components';
 import { graphql, useStaticQuery } from "gatsby";
 import Img from "gatsby-image";
-
+import {
+  MOBILE_WIDTH,
+} from 'src/constants/app';
 const Wrapper = styled.div`
   width: 100%;
 `;
 
 const GridLayout = styled.div`
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
+  /* display: grid;
   justify-content: space-evenly;
-  grid-template-columns: repeat(auto-fill, 300px);
+  grid-template-columns: repeat(5, 1fr);
   grid-gap: 40px 20px;
-  /* border: 1px solid red; */
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 40px 0px;
+  } */
 `;
 
 const Item = styled.div`
-  text-align: center;
+  flex: 1 0 16%;
+  display: flex;
+  padding: 20px 10px;
+  justify-content: center;
   /* border: 1px solid black; */
+  height: 60px;
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    flex: 1 0 34%;
+  }
 `;
 
 const Partners = () => {
   const data = useStaticQuery(graphql`
     query {
-      stone: file(relativePath: { eq: "stone.png" }) {
+      stone: file(relativePath: { eq: "stone2.png" }) {
         childImageSharp {
-          fixed(height: 80) {
+          fixed(height: 60) {
             ...GatsbyImageSharpFixed
           }
         }
       }
       flyingMokney: file(relativePath: { eq: "flyingMonkey.png" }) {
         childImageSharp {
-          fixed(height: 80) {
+          fixed(height: 60) {
             ...GatsbyImageSharpFixed
           }
         }
       }
       taihu: file(relativePath: { eq: "taihu_brew.png" }) {
         childImageSharp {
-          fixed(height: 80) {
+          fixed(height: 60) {
             ...GatsbyImageSharpFixed
           }
         }
       }
       orange_house: file(relativePath: { eq: "orange_house.png" }) {
         childImageSharp {
-          fixed(height: 80) {
+          fixed(height: 60) {
             ...GatsbyImageSharpFixed
           }
         }
       }
       gamania: file(relativePath: { eq: "gama_pay.png" }) {
         childImageSharp {
-          fixed(height: 80) {
+          fixed(height: 60) {
             ...GatsbyImageSharpFixed
           }
         }
diff --git a/src/images/stone.png b/src/images/stone2.png
index 0ab62e2..0ab62e2 100644
--- a/src/images/stone.png
+++ b/src/images/stone2.png
diff --git a/src/pages/index.js b/src/pages/index.js
index a064519..1d40181 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -30,15 +30,15 @@ const rotate = keyframes`
 
 const ChainLine = styled.img`
   position: absolute;
-  width: 105%;
+  width: 120%;
   top: 100px;
-  animation: ${rotate} 8s ease-in-out infinite;
+  animation: ${rotate} 10s ease-in-out infinite;
   @media screen and (max-width: 1300px) {
     top: 180px;
   }
   @media screen and (max-width: ${MOBILE_WIDTH}px) {
     top: 120px;
-    width: 1000px;
+    width: 800px;
   }
 `;
 
@@ -89,6 +89,9 @@ const SectionWrapper = styled.div`
   &:nth-child(odd) {
     background-color: white;
   }
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    padding: 60px 5px;
+  }
 `;
 const SectionTitle = styled.div`
   text-align: center;