Merge pull request #95 from hack4bengal/ark-dev

[FIX]: Fixed Responsiveness
hack4bengal · Jun 4, 2024 · 444bd57 · 444bd57
2 parents 0028333 + 08337cd
commit 444bd57
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 22 deletions.
diff --git a/src/assets/data/TeamContent.js b/src/assets/data/TeamContent.js
@@ -247,7 +247,7 @@ const teamMember = {
     {
       img: arkapravo,
       name: "Arkapravo",
-      title: "Lead Engineer @RevMaxx",
+      title: "Just a Tech",
       linkedIn: "https://www.linkedin.com/in/arkapravo-ghosh",
       twitter: "https://x.com/ArkapravoGhosh1",
     },

diff --git a/src/components/private/about/About.scss b/src/components/private/about/About.scss
@@ -29,6 +29,13 @@
       top: 16px;
       z-index: -2;
 
+      @media screen and (max-width: 1120px) {
+        font-size: 100px;
+        letter-spacing: 0.2rem;
+        top: 5px;
+        left: 50%;
+      }
+
       @media screen and (max-width: 576px) {
         font-size: 73px;
         letter-spacing: 0.2rem;
@@ -62,7 +69,7 @@
     .about__desc {
       width: 50%;
 
-      @media screen and (max-width: 576px) {
+      @media screen and (max-width: 1120px) {
         width: 100%;
         text-align: justify;
 
@@ -96,7 +103,7 @@
         grid-column-gap: unset;
         grid-template-columns: repeat(3, 1fr);
 
-        @media screen and (max-width: 576px) {
+        @media screen and (max-width: 1120px) {
           grid-column-gap: 4rem;
           grid-template-columns: repeat(2, 1fr);
         }
@@ -147,7 +154,7 @@
         display: none;
       }
 
-      @media screen and (max-width: 576px) {
+      @media screen and (max-width: 1120px) {
         margin-top: 2rem;
         width: 100%;
 

diff --git a/src/components/private/landing/Landing.scss b/src/components/private/landing/Landing.scss
@@ -104,13 +104,18 @@
         display: flex;
         gap: 2rem;
 
+        @media screen and (max-width: 1120px) {
+          align-items: center;
+          gap: 1.2rem;
+          right: 50%;
+        }
+
         @media screen and (max-width: 576px) {
           position: relative;
           bottom: 0;
           flex-direction: column;
           align-items: center;
           gap: 1.2rem;
-          right: 50%;
         }
       }
     }

diff --git a/src/components/private/timer/Timer.scss b/src/components/private/timer/Timer.scss
@@ -13,7 +13,7 @@
     display: flex;
     align-items: center;
 
-    @media screen and (max-width: 576px) {
+    @media screen and (max-width: 850px) {
       justify-content: center;
     }
 
@@ -25,6 +25,14 @@
       gap: 4rem;
       margin-top: -4rem;
 
+      @media screen and (max-width: 1120px) {
+        margin-top: 0rem;
+      }
+
+      @media screen and (max-width: 850px) {
+        margin-top: 5rem;
+      }
+
       @media screen and (max-width: 576px) {
         margin-top: 0rem;
         gap: 3rem;
@@ -45,6 +53,10 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
 
+        @media screen and (max-width: 1120px) {
+          font-size: 60px;
+        }
+
         @media screen and (max-width: 576px) {
           font-size: 48px;
         }
@@ -57,6 +69,10 @@
         gap: 1rem;
         z-index: 1;
 
+        @media screen and (max-width: 1120px) {
+          gap: 5px;
+        }
+
         @media screen and (max-width: 576px) {
           gap: 10px;
           display: grid;
@@ -83,6 +99,10 @@
           width: 115px;
           height: 115px;
 
+          @media screen and (max-width: 1120px) {
+            font-size: 30px;
+          }
+
           @media screen and (max-width: 576px) {
             font-size: 35px;
             display: flex;
@@ -140,7 +160,11 @@
   .ghori {
     width: 55%;
 
-    @media screen and (max-width: 576px) {
+    @media screen and (max-width: 1200px) {
+      width: 45%;
+    }
+
+    @media screen and (max-width: 850px) {
       display: none;
     }
   }
@@ -158,10 +182,12 @@
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
-}
+}
diff --git a/src/components/shared/footer/Footer.scss b/src/components/shared/footer/Footer.scss
@@ -10,7 +10,7 @@
   flex-direction: column;
   justify-content: center;
 
-  @media screen and (max-width: 430px) {
+  @media screen and (max-width: 850px) {
     height: auto;
     padding-bottom: 3rem;
   }
@@ -26,7 +26,7 @@
       width: 20rem;
       margin-left: -5px;
 
-      @media screen and (max-width: 430px) {
+      @media screen and (max-width: 850px) {
         width: 18rem;
       }
     }
@@ -35,7 +35,7 @@
       display: none;
     }
 
-    @media screen and (max-width: 430px) {
+    @media screen and (max-width: 850px) {
       flex-direction: column;
       gap: 1.5rem;
       padding: 0rem 1.5rem;
@@ -44,7 +44,7 @@
     }
 
     .footer_content {
-      @media screen and (max-width: 430px) {
+      @media screen and (max-width: 850px) {
         flex-direction: column;
         gap: 1rem;
         justify-content: center;
@@ -76,7 +76,7 @@
         flex-direction: column;
         gap: 1.2rem;
 
-        @media screen and (max-width: 430px) {
+        @media screen and (max-width: 850px) {
           align-items: center;
         }
 
@@ -105,7 +105,7 @@
   }
 
   .previous_season {
-    @media screen and (min-width: 430px) {
+    @media screen and (min-width: 851px) {
       display: none;
     }
 
@@ -129,7 +129,7 @@
   .footer_flexdiv:nth-of-type(2) {
     margin-top: 4rem;
 
-    @media screen and (max-width: 430px) {
+    @media screen and (max-width: 850px) {
       margin-top: 0rem;
       margin-bottom: 1.5rem;
     }
@@ -147,7 +147,7 @@
     left: 46%;
     transform: translateX(-50%);
 
-    @media screen and (max-width: 430px) {
+    @media screen and (max-width: 850px) {
       display: none;
     }
 
@@ -238,7 +238,7 @@
     align-items: center;
     z-index: 3;
 
-    @media screen and (max-width: 430px) {
+    @media screen and (max-width: 850px) {
       gap: 1rem;
       margin-top: 1.5rem;
     }
@@ -262,7 +262,7 @@
     height: 111%;
     z-index: 1;
 
-    @media screen and (max-width: 430px) {
+    @media screen and (max-width: 850px) {
       width: 105%;
     }
   }
@@ -275,7 +275,20 @@
     width: 720px;
     z-index: 2;
 
-    @media screen and (max-width: 430px) {
+    @media screen and (max-width: 1120px) {
+      top: 200px;
+      right: 0;
+      height: fit-content;
+      width: 720px;
+    }
+
+    @media screen and (max-width: 1080px) {
+      top: 200px;
+      right: 0;
+      width: 500px;
+    }
+
+    @media screen and (max-width: 850px) {
       display: none;
     }
   }

diff --git a/src/components/shared/header/Header.jsx b/src/components/shared/header/Header.jsx
@@ -19,9 +19,11 @@ const Header = ({ ...data }) => {
 
   const backWordStyles = {
     fontSize:
-      windowWidth > 700
-        ? data.backWordSize || "150px"
-        : data.backWordSize_mobile,
+      windowWidth < 900
+        ? "100px"
+        : windowWidth > 700
+          ? data.backWordSize || "150px"
+          : data.backWordSize_mobile,
     letterSpacing:
       windowWidth > 700
         ? data.backWordSpacing || "0.8rem"