From f407b687e4b0721809f799390de3bfdb88de2df7 Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Mon, 19 Feb 2024 22:30:12 +0530
Subject: feat: implemented responsive design

---
 .../components/CustomSelect/CustomSelect.module.css | 11 +++++++++++
 client/src/components/Editor/Editor.module.css      | 21 ++++++++++++++++++++-
 client/src/components/Header/Header.module.css      | 10 ++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/client/src/components/CustomSelect/CustomSelect.module.css b/client/src/components/CustomSelect/CustomSelect.module.css
index 59fc828..1cd7b64 100644
--- a/client/src/components/CustomSelect/CustomSelect.module.css
+++ b/client/src/components/CustomSelect/CustomSelect.module.css
@@ -40,3 +40,14 @@
     border-bottom: none;
   }
 }
+
+@media screen and (max-width: 480px) {
+  .select {
+    width: 8rem;
+    font-size: 14px;
+  }
+  
+  .selected__option {
+    padding: 8px;
+  }
+}
diff --git a/client/src/components/Editor/Editor.module.css b/client/src/components/Editor/Editor.module.css
index 02ac7b3..923c083 100644
--- a/client/src/components/Editor/Editor.module.css
+++ b/client/src/components/Editor/Editor.module.css
@@ -85,5 +85,24 @@
 .btn__icon {
   height: 3rem;
   width: 3rem;
-  filter: invert(11%) sepia(0%) saturate(0%) hue-rotate(158deg) brightness(100%) contrast(88%);
+  filter: invert(11%) sepia(0%) saturate(0%) hue-rotate(158deg) brightness(100%)
+    contrast(88%);
+}
+
+@media screen and (max-width: 768px) {
+  .editor {
+    padding: 20px 20px 0 20px;
+  }
+
+  .btn__save {
+    bottom: 2rem;
+    right: 2rem;
+    height: 4rem;
+    width: 4rem;
+  }
+
+  .btn__icon {
+    height: 2rem;
+    width: 2rem;
+  }
 }
diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css
index 6edcee1..3fe6741 100644
--- a/client/src/components/Header/Header.module.css
+++ b/client/src/components/Header/Header.module.css
@@ -13,3 +13,13 @@
 .header__mini{
   color: var(--color-yellow);
 }
+
+@media screen and (max-width: 480px) {
+  .header {
+    margin: 0.5rem 1rem;
+  }
+  
+  .header h1 {
+    font-size: 2rem;
+  }
+}
-- 
cgit v1.2.3-73-gaa49b