From 59235f45745912accf77f5d9282698a8b3872f32 Mon Sep 17 00:00:00 2001 From: Tharanishwaran Date: Sun, 10 Nov 2024 21:20:59 +0530 Subject: [PATCH 1/3] increase-kanvas-icon-size Signed-off-by: Tharanishwaran --- src/sections/Kanvas/kanvas-icon.svg | 2 ++ src/sections/Kanvas/kanvas_banner.js | 16 ++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/sections/Kanvas/kanvas-icon.svg b/src/sections/Kanvas/kanvas-icon.svg index 80226d79285b..ad50e1303ed3 100644 --- a/src/sections/Kanvas/kanvas-icon.svg +++ b/src/sections/Kanvas/kanvas-icon.svg @@ -11,10 +11,12 @@ } + + \ No newline at end of file diff --git a/src/sections/Kanvas/kanvas_banner.js b/src/sections/Kanvas/kanvas_banner.js index dc43b3f1c906..4900923cf757 100644 --- a/src/sections/Kanvas/kanvas_banner.js +++ b/src/sections/Kanvas/kanvas_banner.js @@ -96,7 +96,8 @@ const BannerSectionWrapper = styled.div` overflow: hidden; margin-top: -7rem; position: relative; - left: 30%; + left: 10%; + margin-top: -8rem; z-index: 0; } @@ -117,9 +118,9 @@ const BannerSectionWrapper = styled.div` @media screen and (max-width: 1700px) { .kanvas-logo { - width: 12rem; - /* right: 12rem; */ - /* margin-top: -5rem; */ + width: 20rem; + left: 21%; + margin-top: -7rem; } .para { margin-top: -3rem; @@ -127,10 +128,9 @@ const BannerSectionWrapper = styled.div` } @media screen and (max-width: 1200px) { .kanvas-logo { - left: 20%; - width: 10rem; - /* right: 8rem; */ - margin-top: -5rem; + width: 18rem; + left: 18%; + margin-top: -6rem; } /* border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ; */ } From de45a5dd1d08412e0fa38e18b155c00b1d00f043 Mon Sep 17 00:00:00 2001 From: Tharanishwaran Date: Tue, 12 Nov 2024 20:24:22 +0530 Subject: [PATCH 2/3] Improve-Kanvas-icon-scaling-across-screens Signed-off-by: Tharanishwaran --- src/sections/Kanvas/kanvas-icon.svg | 2 -- src/sections/Kanvas/kanvas_banner.js | 23 ++++++++++++----------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/sections/Kanvas/kanvas-icon.svg b/src/sections/Kanvas/kanvas-icon.svg index ad50e1303ed3..80226d79285b 100644 --- a/src/sections/Kanvas/kanvas-icon.svg +++ b/src/sections/Kanvas/kanvas-icon.svg @@ -11,12 +11,10 @@ } - - \ No newline at end of file diff --git a/src/sections/Kanvas/kanvas_banner.js b/src/sections/Kanvas/kanvas_banner.js index 4900923cf757..dbcef4e7d7c5 100644 --- a/src/sections/Kanvas/kanvas_banner.js +++ b/src/sections/Kanvas/kanvas_banner.js @@ -67,7 +67,6 @@ const BannerSectionWrapper = styled.div` text-align: center; } - } .banner-text p { color: ${props => props.theme.saffronColor}; margin-bottom: .5rem; @@ -120,7 +119,8 @@ const BannerSectionWrapper = styled.div` .kanvas-logo { width: 20rem; left: 21%; - margin-top: -7rem; + /* right: 12rem; */ + /* margin-top: -5rem; */ } .para { margin-top: -3rem; @@ -128,19 +128,20 @@ const BannerSectionWrapper = styled.div` } @media screen and (max-width: 1200px) { .kanvas-logo { + left: 20%; width: 18rem; - left: 18%; - margin-top: -6rem; + /* right: 8rem; */ + margin-top: -5rem; } /* border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ; */ } @media screen and (max-width: 992px) { .kanvas-logo { - width: 8rem; + width: 16rem; margin-top: -2rem; left: 15%; } - border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ; + border-radius: 0% 85% 0% 0% / 0% 60% 0% 0%; } @media screen and (max-width: 768px) { @@ -148,8 +149,8 @@ const BannerSectionWrapper = styled.div` .kanvas-logo { margin-top: -5rem; margin-right: 2rem; - left: 7%; - min-width: 5rem; + left: 10%; + min-width: 8rem; } border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; } @@ -158,7 +159,7 @@ const BannerSectionWrapper = styled.div` margin-top: -5rem; margin-right: 2rem; left: 0%; - min-width: 3rem; + min-width: 6rem; } border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; } @@ -166,8 +167,8 @@ const BannerSectionWrapper = styled.div` .kanvas-logo { margin-top: -5rem; margin-right: 0; - left: -20%; - min-width: 3rem; + left: -10%; + min-width: 5rem; } border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; } From 6aae58ff213e712c38e8de9f7f64d1a5f203403e Mon Sep 17 00:00:00 2001 From: Tharanishwaran Date: Sat, 23 Nov 2024 23:33:31 +0530 Subject: [PATCH 3/3] Added responsive design for smaller screens Signed-off-by: Tharanishwaran --- src/sections/Kanvas/kanvas_banner.js | 51 ++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/src/sections/Kanvas/kanvas_banner.js b/src/sections/Kanvas/kanvas_banner.js index dbcef4e7d7c5..faa39d7dffe5 100644 --- a/src/sections/Kanvas/kanvas_banner.js +++ b/src/sections/Kanvas/kanvas_banner.js @@ -159,15 +159,60 @@ const BannerSectionWrapper = styled.div` margin-top: -5rem; margin-right: 2rem; left: 0%; - min-width: 6rem; + min-width: 8rem; } border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; } - @media screen and (max-width: 400px) { + @media screen and (max-width: 450px) { .kanvas-logo { margin-top: -5rem; - margin-right: 0; + margin-right: 1rem; left: -10%; + min-width: 7rem; + } + border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; + } + @media screen and (max-width: 400px) { + .kanvas-logo { + margin-top: -5rem; + margin-right: 0rem; + left: -28%; + min-width: 6rem; + } + border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; + } + @media screen and (max-width: 350px) { + .kanvas-logo { + margin-top: -5rem; + margin-right: 0rem; + left: -48%; + min-width: 5rem; + } + border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; + } + @media screen and (max-width: 305px) { + .kanvas-logo { + margin-top: -5rem; + margin-right: 0rem; + left: -90%; + min-width: 5rem; + } + border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; + } + @media screen and (max-width: 260px) { + .kanvas-logo { + margin-top: -5rem; + margin-right: 0rem; + left: -170%; + min-width: 5rem; + } + border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; + } + @media screen and (max-width: 210px) { + .kanvas-logo { + margin-top: -5rem; + margin-right: 0rem; + left: -280%; min-width: 5rem; } border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;