Merge pull request #10 from Molaryy/feat/responsive

feat: added responsive
Molaryy · Dec 6, 2023 · 72cbe88 · 72cbe88 · vercel · Dec 6, 2023
2 parents 10a4842 + 9cad5a6
commit 72cbe88
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 20 deletions.
diff --git a/frontend/src/styles/App.scss b/frontend/src/styles/App.scss
@@ -1,15 +1,13 @@
+
 body {
-  padding: 0;
-  margin: 0;
   font-family: 'Poppins', sans-serif;
   background-color: #b9b0b0;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .time-form {
-  margin-top: 10rem;
-  margin-left: 10%;
-  width: 420px;
-  height: 400px;
   background-color: #ffffff;
   border-radius: 10px;
   transition: all 0.3s ease 0s;
@@ -102,3 +100,22 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+
+@media (width < 700px) {
+  .time-form {
+    margin-top: 10rem;
+    margin-left: 10%;
+    width: 320px;
+    height: 400px;
+  }
+}
+
+@media (width >= 700px) {
+  .time-form {
+    margin-top: 10rem;
+    margin-left: 10%;
+    width: 420px;
+    height: 400px;
+  }
+}
diff --git a/frontend/src/styles/ListTodos.scss b/frontend/src/styles/ListTodos.scss
@@ -1,11 +1,9 @@
 .todos-title-header {
   position: absolute;
-  width: 380px;
-  height: 50px;
+
   border-radius: 10px;
   transition: all 0.3s ease 0s;
   margin-left: 70%;
-  top: 12.19rem;
   text-align: center;
   line-height: 15px;
   color: white;
@@ -16,10 +14,6 @@
   position: absolute;
   overflow-x: hidden;
   overflow-y: auto;
-  height: 500px;
-  width: 400px;
-  top: 16rem;
-  margin-left: 70%;
 }
 
 .todos-list {
@@ -95,11 +89,6 @@
   line-height: 0;
 }
 
-.todo-input-form {
-  width: 420px;
-  margin-left: 10%;
-}
-
 .todo-custom-settings-container {
   position: absolute;
   width: 250px;
@@ -110,3 +99,46 @@
   top: 20rem;
 }
 
+@media (width < 700px) {
+  .todos-title-header {
+    width: 320px;
+    height: 50px;
+    top: 50rem;
+    right: 1.75rem;
+  }
+  .todo-input-form {
+    margin-left: 10%;
+  }
+  .todos-list-container {
+    height: 500px;
+    width: 400px;
+    margin-left: 5%;
+    top: 55rem;
+  }
+  .input-todo {
+    margin-top: 2rem;
+    width: 320px;
+    height: 50px;
+  }
+  .get-todos-container {
+    width: 320px;
+  }
+}
+
+@media (width >= 700px) {
+  .todos-title-header {
+    width: 380px;
+    height: 50px;
+    top: 12.19rem;
+  }
+  .todo-input-form {
+    width: 420px;
+    margin-left: 10%;
+  }
+  .todos-list-container {
+    height: 500px;
+    width: 400px;
+    top: 16rem;
+    margin-left: 70%;
+  }
+}
diff --git a/frontend/src/styles/NavBar.scss b/frontend/src/styles/NavBar.scss
@@ -1,7 +1,10 @@
 .navbar {
-  list-style: none;
-  display: flex;
   background-color: #ffffff;
   height: 35px;
   width: 100%;
 }
+
+@media (width < 700px) {
+  .navbar {
+  }
+}