Enhance Responsiveness: Adjust Button Layout for Small Screens

Todo.html

@@ -34,8 +34,9 @@
       <div class="navlinks-container">
         <ul class="navlinks">
           <li class="link">
-            <a href="index.html"
-              >Back to main <i class="fa-solid fa-arrow-right"></i
+            <a href="index.html">
+              <span class="back-to-man"> Back to main </span>
+              <i class="fa-solid fa-arrow-right"></i
             ></a>
           </li>
         </ul>
@@ -82,12 +83,15 @@ <h1 class="subtitle">Todo-List</h1>
       <!-- Sorting and task counter section -->
       <div class="sort-buttons">
         <div class="sort-filter-container">
-          <button class="sort-button" onclick="sortTodos('category')">
-            Sort by Category
-          </button>
-          <button class="sort-button" onclick="sortTodos('priority')">
-            Sort by Priority
-          </button>
+          <div class="button-container">
+            <button class="sort-button" onclick="sortTodos('category')">
+              Sort by Category
+            </button>
+            <button class="sort-button" onclick="sortTodos('priority')">
+              Sort by Priority
+            </button>
+          </div>
+
           <select class="js-filter-input" onchange="filterTodos()">
             <option value="all">All</option>
             <option value="pending">Pending</option>

style.css

@@ -84,6 +84,8 @@ why-need-link {
 }
 
 .link a {
+  display: flex;
+  align-items: center;
   font-size: 1rem;
   font-weight: 500;
   text-decoration: none;
@@ -96,12 +98,15 @@ why-need-link {
 .link a:hover {
   background-color: rgb(228, 227, 227);
   transition: all 300ms linear;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 .link i {
   font-size: 1rem;
   align-self: center;
+  margin-left: 0.4rem;
 }
+
 .container {
   width: 100%;
   max-width: 1000px;
@@ -343,22 +348,27 @@ footer p {
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 10px;
 }
 
 .social-media a {
-  margin: 1px 11px;
+  width: 32px;
+  height: 32px;
   color: black;
-  font-size: 15px;
-  padding: 8px;
-  border: 2px solid black;
+  font-size: 16px;
+  border: 1.5px solid black;
   border-radius: 8px;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+  transition: all 0.25s ease-out;
+}
+.social-media a i {
+  vertical-align: middle;
 }
-
 .social-media a:hover {
   transform: scale(1.05);
   transition: all 0.25s ease-out;
-  border: none;
+  border: transparent;
 }
 
 .social-media .insta:hover {
@@ -460,7 +470,6 @@ Animating title
   margin-left: auto;
   margin-right: 0;
 }
-
 .task-counter-button:hover {
   background-color: #45a049; /* Same hover effect as sort button */
 }
@@ -671,3 +680,43 @@ Animating title
     width: 200px;
   }
 }
+@media screen and (max-width: 420px) {
+  .container {
+    margin-top: 10px;
+    max-width: 100%;
+  }
+
+  .sort-buttons {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .button-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+  }
+  .sort-button {
+    width: 40%;
+  }
+  .task-counter-button {
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  .back-to-man {
+    display: none;
+  }
+  .navlinks {
+    margin-right: 1rem; /* Reduce margin on smaller screens */
+  }
+
+  .link a {
+    font-size: 0.9rem; /* Smaller font size for mobile */
+    padding: 0.4rem; /* Less padding for compactness */
+  }
+
+  .link i {
+    font-size: 0.9rem; /* Smaller icon size */
+  }
+}