From a98365cd40e544b93dbbdd23750d62fd61a01f70 Mon Sep 17 00:00:00 2001 From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> Date: Sun, 10 Nov 2024 21:43:10 +0530 Subject: [PATCH 1/9] Made the section Playground section responsive Signed-off-by: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> --- src/sections/Home/Playground-home/index.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index 0ba21c56e679..5ec103a2e160 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -55,7 +55,7 @@ const ViewsSectionWrapper = styled.div` height: 500px; justify-content: space-evenly; align-items: center; - padding: 0 5% 0 0; + padding: 0 0 0 0; box-sizing: border-box; //box-shadow: ${(props) => props.theme.boxShadowBlue477E96}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); @@ -65,6 +65,14 @@ const ViewsSectionWrapper = styled.div` text-align: center; flex-direction: column-reverse; } + + @media only screen and (max-width: 450px) { + height: 600px; + } + + @media only screen and (max-width: 296px) { + height: 800px; + } } .hero-text { display: flex; @@ -72,11 +80,17 @@ const ViewsSectionWrapper = styled.div` flex: 0 0 50%; max-width: 50%; padding-bottom: 3rem; + padding-left: 1rem; @media only screen and (max-width: 767px) { max-width: 100%; justify-content: center; text-align: center; } + + @media only screen and (max-width: 450px) { + margin-top: 200px; + } + } .hero-image { From 56c139c51b4b4141f26c0691f0b30f987eb8f33a Mon Sep 17 00:00:00 2001 From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> Date: Sun, 10 Nov 2024 23:49:51 +0530 Subject: [PATCH 2/9] Update src/sections/Home/Playground-home/index.js Co-authored-by: Vivek Vishal Signed-off-by: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> --- src/sections/Home/Playground-home/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index 5ec103a2e160..7bd07842593e 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -64,6 +64,8 @@ const ViewsSectionWrapper = styled.div` @media only screen and (max-width: 767px) { text-align: center; flex-direction: column-reverse; + height: 600px; + padding: 0 2%; } @media only screen and (max-width: 450px) { From 720d7407c21fc754277ab4f16a4c70f494e9a26a Mon Sep 17 00:00:00 2001 From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> Date: Sun, 10 Nov 2024 23:50:13 +0530 Subject: [PATCH 3/9] Update src/sections/Home/Playground-home/index.js Co-authored-by: Vivek Vishal Signed-off-by: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> --- src/sections/Home/Playground-home/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index 7bd07842593e..9531e2d7af5c 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -55,7 +55,7 @@ const ViewsSectionWrapper = styled.div` height: 500px; justify-content: space-evenly; align-items: center; - padding: 0 0 0 0; + padding: 0 5% 0 0; box-sizing: border-box; //box-shadow: ${(props) => props.theme.boxShadowBlue477E96}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); From 1e0405b5a35b44da6745516130f4d7b7c0c9187d Mon Sep 17 00:00:00 2001 From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> Date: Sun, 10 Nov 2024 23:50:51 +0530 Subject: [PATCH 4/9] Update src/sections/Home/Playground-home/index.js Co-authored-by: Vivek Vishal Signed-off-by: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> --- src/sections/Home/Playground-home/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index 9531e2d7af5c..9a7cb88dfabe 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -82,7 +82,6 @@ const ViewsSectionWrapper = styled.div` flex: 0 0 50%; max-width: 50%; padding-bottom: 3rem; - padding-left: 1rem; @media only screen and (max-width: 767px) { max-width: 100%; justify-content: center; From 59163b4ebc328eb094be7943975d355a071c445b Mon Sep 17 00:00:00 2001 From: Vivek Vishal Date: Mon, 11 Nov 2024 00:04:26 +0530 Subject: [PATCH 5/9] Update index.js Signed-off-by: Vivek Vishal --- src/sections/Home/Playground-home/index.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index 9a7cb88dfabe..80fba303b3f9 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -68,13 +68,6 @@ const ViewsSectionWrapper = styled.div` padding: 0 2%; } - @media only screen and (max-width: 450px) { - height: 600px; - } - - @media only screen and (max-width: 296px) { - height: 800px; - } } .hero-text { display: flex; @@ -86,6 +79,7 @@ const ViewsSectionWrapper = styled.div` max-width: 100%; justify-content: center; text-align: center; + margin-top: 4rem; } @media only screen and (max-width: 450px) { From 4cadc8fdf2cb0c0509f7b046adf5aaeb28b10f1d Mon Sep 17 00:00:00 2001 From: Vivek Vishal Date: Mon, 11 Nov 2024 00:05:02 +0530 Subject: [PATCH 6/9] Update src/sections/Home/Playground-home/index.js Signed-off-by: Vivek Vishal --- src/sections/Home/Playground-home/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index 80fba303b3f9..dc12383140a5 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -82,8 +82,6 @@ const ViewsSectionWrapper = styled.div` margin-top: 4rem; } - @media only screen and (max-width: 450px) { - margin-top: 200px; } } From 71a524bd008d2a3ebcf6b591663a6f5be557b049 Mon Sep 17 00:00:00 2001 From: Vivek Vishal Date: Mon, 11 Nov 2024 00:05:44 +0530 Subject: [PATCH 7/9] Update src/sections/Home/Playground-home/index.js Signed-off-by: Vivek Vishal --- src/sections/Home/Playground-home/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index dc12383140a5..cac0c910877d 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -80,7 +80,7 @@ const ViewsSectionWrapper = styled.div` justify-content: center; text-align: center; margin-top: 4rem; - } + } From ae9bd7a57ef4ef9624783289190195a58d25f8eb Mon Sep 17 00:00:00 2001 From: Vivek Vishal Date: Mon, 11 Nov 2024 00:06:06 +0530 Subject: [PATCH 8/9] Update src/sections/Home/Playground-home/index.js Signed-off-by: Vivek Vishal --- src/sections/Home/Playground-home/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index cac0c910877d..fb3612b8d59c 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -80,8 +80,6 @@ const ViewsSectionWrapper = styled.div` justify-content: center; text-align: center; margin-top: 4rem; - - } } From 28306ed689d736e860fcb8f0b40059f599d37249 Mon Sep 17 00:00:00 2001 From: Vivek Vishal Date: Mon, 11 Nov 2024 00:42:46 +0530 Subject: [PATCH 9/9] add padding-left to hero-text between 767px and 1100px screen width Signed-off-by: Vivek Vishal --- src/sections/Home/Playground-home/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index fb3612b8d59c..c2aff158ba18 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -81,6 +81,10 @@ const ViewsSectionWrapper = styled.div` text-align: center; margin-top: 4rem; } + @media only screen and (min-width: 768px) and (max-width: 1100px) { + padding-left: 1rem; + } + }