Update style.css

style.css

@@ -134,6 +134,47 @@ body {
     align-items: center;
 }
 
+/* Mode Mobile */
+@media screen and (max-width: 768px) {
+    .currency-select {
+        flex-direction: column; /* Ubah jadi vertikal */
+        align-items: center;
+    }
+
+    #swap-btn {
+        transform: rotate(90deg); /* Rotate arrow to vertical */
+        width: 50px; /* Ensure button size stays the same */
+        height: 50px;
+    }
+
+    .currency-group select,
+    .currency-box input {
+        width: 100%; /* Sesuaikan lebar dropdown dan input untuk mobile */
+    }
+}
+
+/* Mode Web */
+@media screen and (min-width: 769px) {
+    .currency-select {
+        flex-direction: row; /* Horizontal untuk mode web */
+        align-items: center;
+    }
+
+    #swap-btn {
+        transform: rotate(0deg); /* Keep arrow horizontal */
+        width: 50px;
+        height: 50px;
+    }
+
+    .currency-group select {
+        width: auto; /* Sesuaikan lebar dropdown untuk web */
+    }
+
+    .currency-box input {
+        width: auto; /* Sesuaikan lebar input untuk web */
+    }
+}
+
 #swap-btn i {
     font-size: 24px;
 }
@@ -212,40 +253,4 @@ body {
 
 .footer-content p {
     margin: 5px 0;
-}
-
-/* Penyesuaian tombol swap dan elemen lainnya untuk mode mobile */
-@media screen and (max-width: 768px) {
-    .currency-select {
-        flex-direction: column; /* Untuk elemen vertikal */
-        align-items: center;
-    }
-
-    .currency-box input,
-    .currency-select select {
-        width: 100%; /* Agar input dan dropdown lebarnya sama */
-        max-width: 400px; /* Sama dengan lebar input "amount" */
-    }
-
-    /* Arah panah swap vertikal untuk mode mobile */
-    #swap-btn {
-        transform: rotate(90deg); /* Arahkan panah swap ke vertikal */
-    }
-
-    .steps {
-        flex-direction: column; /* Langkah-langkah dalam kolom */
-        align-items: center;
-    }
-}
-
-/* Penyesuaian untuk tampilan desktop (web mode) */
-@media screen and (min-width: 769px) {
-    /* Arah panah swap horizontal untuk mode web */
-    #swap-btn {
-        transform: rotate(0deg); /* Arahkan panah swap ke horizontal */
-    }
-
-    .currency-select {
-        flex-direction: row; /* Untuk elemen horizontal */
-    }
 }