mobile changes

Rouncer27 · Jun 13, 2023 · 487ba6a · 487ba6a
1 parent 44e7f5f
commit 487ba6a
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 16 deletions.
diff --git a/src/components/templates/contact/ContactIntro.js b/src/components/templates/contact/ContactIntro.js
@@ -76,12 +76,17 @@ const StyledSection = styled.section`
     &--logo {
       position: relative;
       width: 100%;
-      max-width: 45.6rem;
+      max-width: 30rem;
       margin: auto;
       z-index: 10;
+
+      @media (min-width: 768px) {
+        max-width: 45.6rem;
+      }
     }
 
     &--mountains {
+      display: none;
       position: absolute;
       top: 0rem;
       left: 0;
@@ -92,6 +97,10 @@ const StyledSection = styled.section`
       background-repeat: no-repeat;
       z-index: 1;
 
+      @media (min-width: 768px) {
+        display: block;
+      }
+
       &:last-of-type {
         left: auto;
         right: 0;

diff --git a/src/components/templates/home/Flavours.js b/src/components/templates/home/Flavours.js
@@ -60,10 +60,15 @@ const Flavours = ({ data }) => {
 
 const StyledSection = styled.section`
   position: relative;
-  padding-top: 14rem;
+  padding-top: 20rem;
   padding-bottom: 10rem;
   z-index: 10;
 
+  @media (min-width: 768px) {
+    padding-top: 14rem;
+    padding-bottom: 10rem;
+  }
+
   .wrapper {
     ${medWrapper};
     position: relative;
@@ -109,15 +114,22 @@ const StyledSection = styled.section`
 
   .flavours-fire {
     position: absolute;
-    top: -9rem;
+    top: 2rem;
     left: 50%;
-    width: calc(20.8rem / 1.25);
-    height: calc(25.2rem / 1.25);
+    width: calc(20.8rem / 1.5);
+    height: calc(25.2rem / 1.5);
     transform: translateX(-50%);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 2;
+
+    @media (min-width: 768px) {
+      top: -9rem;
+      left: 50%;
+      width: calc(20.8rem / 1.25);
+      height: calc(25.2rem / 1.25);
+    }
   }
 
   .flavours-bg {
@@ -134,10 +146,12 @@ const StyledSection = styled.section`
 `
 
 const Item = styled.div`
-  width: calc(50%);
+  width: calc(50% - 1rem);
+  margin: 0.5rem;
 
   @media (min-width: 768px) {
-    width: calc(50%);
+    width: calc(50% - 2rem);
+    margin: 1rem;
   }
 
   @media (min-width: 1025px) {

diff --git a/src/components/templates/home/HomeIntro.js b/src/components/templates/home/HomeIntro.js
@@ -75,9 +75,13 @@ const HomeIntro = ({ data }) => {
 
 const StyledSection = styled.section`
   position: relative;
-  background-color: #212326;
+  background-color: ${colors.colorPrimary};
   padding-top: 5.8rem;
 
+  @media (min-width: 768px) {
+    background-color: #212326;
+  }
+
   .wrapper {
     display: flex;
     flex-wrap: wrap;
@@ -89,11 +93,12 @@ const StyledSection = styled.section`
     width: calc(100%);
     border-top-right-radius: 10rem;
     border-bottom-right-radius: 10rem;
-    background-color: ${colors.colorPrimary};
+    background-color: transparent;
     z-index: 10;
 
     @media (min-width: 768px) {
       width: calc(65%);
+      background-color: ${colors.colorPrimary};
     }
 
     @media (min-width: 1025px) {
@@ -104,10 +109,11 @@ const StyledSection = styled.section`
       width: 100%;
       max-width: 67.5rem;
       margin: 0 0 0 auto;
-      padding: 7rem 12rem;
+      padding: 2rem 2rem;
 
       @media (min-width: 768px) {
         max-width: 67.5rem;
+        padding: 7rem 12rem;
       }
 
       @media (min-width: 1025px) {
@@ -116,10 +122,21 @@ const StyledSection = styled.section`
     }
 
     &__logo {
+      max-width: 30rem;
+      margin: auto;
       margin-bottom: 5rem;
+
+      @media (min-width: 768px) {
+        max-width: 100%;
+      }
     }
 
     &__title {
+      text-align: center;
+      @media (min-width: 768px) {
+        text-align: left;
+      }
+
       p {
         ${B2White};
         text-transform: uppercase;
@@ -132,6 +149,12 @@ const StyledSection = styled.section`
     }
 
     &__content {
+      text-align: center;
+
+      @media (min-width: 768px) {
+        text-align: left;
+      }
+
       p {
         ${B1White};
       }
@@ -152,10 +175,11 @@ const StyledSection = styled.section`
     }
 
     &__inner {
-      padding: 4rem 3.5rem;
+      padding: 2rem;
 
       @media (min-width: 768px) {
         max-width: 30rem;
+        padding: 4rem 3.5rem;
       }
 
       @media (min-width: 1025px) {
@@ -164,18 +188,29 @@ const StyledSection = styled.section`
     }
 
     &__order {
-      position: absolute;
-      top: 2rem;
-      right: 0;
+      text-align: center;
+
+      @media (min-width: 768px) {
+        position: absolute;
+        top: 2rem;
+        right: 0;
+        text-align: left;
+      }
 
       a {
         ${Btn1One};
       }
     }
 
     &__mountains {
-      margin-top: 7.5rem;
-      margin-bottom: 3rem;
+      max-width: 20rem;
+      margin: 4rem auto;
+
+      @media (min-width: 768px) {
+        max-width: 100%;
+        margin-top: 7.5rem;
+        margin-bottom: 3rem;
+      }
     }
 
     &__content {
@@ -188,6 +223,12 @@ const StyledSection = styled.section`
     }
 
     &__icon {
+      display: none;
+
+      @media (min-width: 768px) {
+        display: block;
+      }
+
       &--wrapper {
         margin-left: auto;
         max-width: 26rem;
@@ -196,6 +237,7 @@ const StyledSection = styled.section`
   }
 
   .graphic-one {
+    display: none;
     position: absolute;
     right: 0;
     bottom: 2rem;
@@ -205,6 +247,10 @@ const StyledSection = styled.section`
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
   }
 `