From 319d10f68f2e82db58f0d9509d61bac141e680f4 Mon Sep 17 00:00:00 2001 From: Arkapravo-Ghosh Date: Tue, 4 Jun 2024 00:30:00 +0530 Subject: [PATCH 1/5] fix: fixed timeline and about section responsiveness --- src/assets/data/TeamContent.js | 2 +- src/components/private/about/About.scss | 13 ++++++++++--- src/components/private/timer/Timer.scss | 24 +++++++++++++++++++++++- 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/assets/data/TeamContent.js b/src/assets/data/TeamContent.js index ac15df0..884d86e 100644 --- a/src/assets/data/TeamContent.js +++ b/src/assets/data/TeamContent.js @@ -240,7 +240,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 index ca8a892..370f58d 100644 --- 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/timer/Timer.scss b/src/components/private/timer/Timer.scss index 5335b7d..9bf2143 100644 --- a/src/components/private/timer/Timer.scss +++ b/src/components/private/timer/Timer.scss @@ -25,6 +25,10 @@ gap: 4rem; margin-top: -4rem; + @media screen and (max-width: 1120px) { + margin-top: 0rem; + } + @media screen and (max-width: 576px) { margin-top: 0rem; gap: 3rem; @@ -40,6 +44,10 @@ line-height: 1; z-index: 1; + @media screen and (max-width: 1120px) { + font-size: 60px; + } + @media screen and (max-width: 576px) { font-size: 48px; } @@ -52,6 +60,10 @@ gap: 1rem; z-index: 1; + @media screen and (max-width: 1120px) { + gap: 5px; + } + @media screen and (max-width: 576px) { gap: 10px; } @@ -67,6 +79,10 @@ padding: 1rem; border-radius: 18px; + @media screen and (max-width: 1120px) { + font-size: 30px; + } + @media screen and (max-width: 576px) { font-size: 28px; } @@ -114,6 +130,10 @@ .ghori { width: 55%; + @media screen and (max-width: 1200px) { + width: 45%; + } + @media screen and (max-width: 576px) { display: none; } @@ -132,10 +152,12 @@ 0% { opacity: 1; } + 50% { opacity: 0; } + 100% { opacity: 1; } -} +} \ No newline at end of file From e74c448b82925492a4b55391e2074929dc59e711 Mon Sep 17 00:00:00 2001 From: Arkapravo-Ghosh Date: Tue, 4 Jun 2024 00:48:04 +0530 Subject: [PATCH 2/5] fix: fixed landing responsiveness --- src/components/private/landing/Landing.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/private/landing/Landing.scss b/src/components/private/landing/Landing.scss index 7662352..7c9d969 100644 --- 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%; } } } From 5401bbfe3957fde306cb71217bfad98b6aaf217a Mon Sep 17 00:00:00 2001 From: Arkapravo-Ghosh Date: Tue, 4 Jun 2024 00:56:41 +0530 Subject: [PATCH 3/5] fix: fixed header responsiveness --- src/components/shared/header/Header.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/shared/header/Header.jsx b/src/components/shared/header/Header.jsx index 1f6a39e..9548158 100644 --- 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" From 48eb71ca198e452dae039ae5f9181b9472a2605d Mon Sep 17 00:00:00 2001 From: Arkapravo-Ghosh Date: Tue, 4 Jun 2024 01:08:21 +0530 Subject: [PATCH 4/5] fix: fixed footer responsiveness --- src/components/shared/footer/Footer.scss | 35 ++++++++++++++++-------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/src/components/shared/footer/Footer.scss b/src/components/shared/footer/Footer.scss index 88685d4..a59a50b 100644 --- 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: 1; - @media screen and (max-width: 430px) { + @media screen and (max-width: 850px) { gap: 1rem; margin-top: 1.5rem; } @@ -262,7 +262,7 @@ width: 45%; z-index: -1; - @media screen and (max-width: 430px) { + @media screen and (max-width: 850px) { width: 105%; } } @@ -275,7 +275,20 @@ width: 720px; opacity: 0.65; - @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; } } From fe48ddda41a23ece3f941127d67065425aface74 Mon Sep 17 00:00:00 2001 From: Arkapravo-Ghosh Date: Tue, 4 Jun 2024 01:13:05 +0530 Subject: [PATCH 5/5] fix: fixed timeline responsiveness --- src/components/private/timer/Timer.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/private/timer/Timer.scss b/src/components/private/timer/Timer.scss index 9bf2143..dab970f 100644 --- 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; } @@ -29,6 +29,10 @@ margin-top: 0rem; } + @media screen and (max-width: 850px) { + margin-top: 5rem; + } + @media screen and (max-width: 576px) { margin-top: 0rem; gap: 3rem; @@ -134,7 +138,7 @@ width: 45%; } - @media screen and (max-width: 576px) { + @media screen and (max-width: 850px) { display: none; } }