responsive

src/app/components/add-task/add-task.component.html

@@ -5,7 +5,7 @@
     class="headline"
     [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
   >
-    <div class="title">Add Tasks</div>
+    <div class="title">Add Task</div>
   </div>
 
   <form

src/app/components/add-task/add-task.component.scss

@@ -343,3 +343,36 @@ p {
     }
   }
 }
+
+@media screen and (max-width: 700px) {
+  .btn-text {
+    span {
+      display: block;
+    }
+  }
+
+  .content {
+    display: block;
+  }
+
+  .right-side,
+  .left-side {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .btn-text {
+    span {
+      display: none;
+    }
+  }
+
+  .headline {
+    margin-bottom: 24px;
+    .title {
+      font-size: 47px;
+      font-weight: 700;
+    }
+  }
+}