Fixing responsive

lab_5/static/css/lab_5.css

@@ -80,53 +80,13 @@ section{
     color: #2C3E50;
     font-size: 13px;
 }
+
 /* styling footer */
 footer p{
   text-align: center;
   padding-top: 10px;
 }
 
-/* styling responsive max-width menandakan bahwa rule css ini hanya akan bekerja untuk layar dengan maksimal 768px, jika lebih dari 768px maka rule ini diabaikan */
-@media only screen and (max-width: 768px) {
-  #input-list form {
-      width: 290px;
-  }
-}
-
-#input-list{
-  background: linear-gradient(to bottom right, #606062, #393939);
-}
-#input-list form{
-  width: 400px;
-  margin: 50px auto;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-  background: white;
-  border: 0 none;
-  border-radius: 3px;
-  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
-  padding: 20px 30px;
-  box-sizing: border-box;
-  position: relative;
-}
-#input-list form > h2{
-  font-size: 1.3em;
-  text-transform: uppercase;
-  color: #2C3E50;
-  margin-bottom: 10px;
-}
-#input-list form > .todo-form-input, #input-list form > .todo-form-textarea{
-  padding: 15px;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    margin-bottom: 10px;
-    width: 100%;
-    box-sizing: border-box;
-    color: #2C3E50;
-    font-size: 13px;
-}
-
 #my-list{
   background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
 }
@@ -171,11 +131,33 @@ footer p{
 }
 
 /* Small screens */
-@media all and (max-width: 768px) {
-  .flex {
+@media only screen and (max-width: 768px) {
+    #input-list form{
     /* On small screens, we are no longer using row direction but column */
+    width: 400px;
+  }
+   .flex{
     flex-direction: column;
   }
+
+  .flex-item{
+    width: 100vw;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  #input-list form {
+    /* On small screens, we are no longer using row direction but column */
+    width: 90vw;
+  }
+
+  .flex{
+    flex-direction: column;
+  }
+
+  .flex-item{
+    width: 100vw;
+  }
 }
 
 .flex-item{

lab_5/templates/lab_5/lab_5.html

@@ -21,7 +21,7 @@
             {% if todo %}
                 {% for data in todo %}
                     <div id="parent" class="flex-item">
-                        <div onclick="removeElement(this);" id="child" class="to-do-list">
+                        <div id="child" class="to-do-list">
                             <div class="to-do-list-title">
                                 {{data.title}}
                             </div>
@@ -31,7 +31,7 @@
                             <div class="to-do-list-description">
                                 {{data.description}}
                             </div>
-                            <div id="delete" class="to-do-list-delete">
+                            <div onclick="removeElement(this);" id="delete" class="to-do-list-delete">
                                 <div class="to-do-list-delete-button" data-id="{{data.id}}">Delete</div>
                             </div>
                         </div>

lab_5/views.py

@@ -22,4 +22,4 @@ def add_todo(request):
         todo.save()
         return HttpResponseRedirect('/lab-5/')
     else:
-        return HttpResponseRedirect('/lab-5/')
+        return HttpResponseRedirect('/lab-5/')
\ No newline at end of file