feat: implemented responsive design

3 files changed, 41 insertions, 1 deletions

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;
+  }
+}