From 6aae58ff213e712c38e8de9f7f64d1a5f203403e Mon Sep 17 00:00:00 2001
From: Tharanishwaran <tharanishwaran.ta@gmail.com>
Date: Sat, 23 Nov 2024 23:33:31 +0530
Subject: [PATCH] Added responsive design for smaller screens

Signed-off-by: Tharanishwaran <tharanishwaran.ta@gmail.com>
---
 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% ;