Merge pull request #12 from elizabetholsavsky/feature/responsive

-madd first media query, needs margin/padding
elizabetholsavsky · Jan 23, 2024 · f87e8f4 · f87e8f4
2 parents 558258d + 4c394d7
commit f87e8f4
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -18,14 +18,16 @@ <h1>TO DO</h1>
     </header>
 
     <div class="content">
-            <!-- input task -->
-        <form class="form-container">
-            <input type="text" class="todo-input">
+        <!-- input task -->
+        <form>
+            <div class="input-container">
+                <input type="text" class="todo-input">
 
-            <button class="todo-button" type="submit">
-                <i class="fa-solid fa-plus"></i>
-            </button>
-
+                <button class="todo-button" type="submit">
+                    <i class="fa-solid fa-plus"></i>
+                </button>
+            </div>
+
             <!-- filter dropdown -->
             <div class="select">
                 <select name="todos" class="filter-todo">

diff --git a/style.css b/style.css
@@ -29,26 +29,32 @@ body {
     font-size: 1.25rem;
 }
 
+/* gradient animation */
 @keyframes bg-animation {
     0% {background-position: left}
     100% {background-position: right;}
 }
 
+/* header */
+
 header {
     font-size: 1.5rem;
     color: var(--highlight);
 }
 
 header, 
-form {
+form,
+.input-container {
     min-height: 20vh;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-form input,
-form button {
+/* FORM */
+
+.todo-input,
+.todo-button {
     padding: 0.5rem;
     font-size: 1.5rem;
     border: none;
@@ -67,6 +73,8 @@ form button:hover{
     color: var(--highlight);
 }
 
+/* TASK LIST */
+
 .todo-container {
     display: flex;
     justify-content: center;
@@ -134,6 +142,8 @@ form button:hover{
     opacity: 0;
 }
 
+/* DROP DOWN SELECT */
+
 select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -175,4 +185,21 @@ select {
 .select:hover::after {
     background: var(--action);
     color:  var(--highlight);
+}
+
+@media (max-width: 550px) {
+    form,
+    select {
+        display: block; 
+        margin: auto;
+
+    }
+    select,
+    .input-container {
+        width: 95%;
+        margin: 1rem;
+    }
+    .filter-todo {
+        margin: 0;
+    }
 }