Update style.css

style.css

@@ -214,19 +214,34 @@ body {
     margin: 5px 0;
 }
 
+/* Untuk ukuran "from" dan "to" agar sama dengan "amount" pada mode mobile */
 @media screen and (max-width: 768px) {
+    .currency-group select,
+    .currency-box input {
+        width: 100%; /* Pastikan dropdown dan input memiliki lebar yang sama */
+        max-width: 400px; /* Lebar maksimum sama dengan input "amount" */
+    }
+
+    /* Mengatur arah panah swap pada mode mobile */
+    #swap-btn {
+        transform: rotate(90deg); /* Rotasi 90 derajat untuk panah horizontal */
+    }
+
+    /* Untuk tombol swap agar sesuai pada mode mobile */
     .currency-select {
-        flex-direction: column; /* Ubah jadi vertikal */
-        align-items: center;
+        flex-direction: column; /* Agar elemen berada di bawah satu sama lain */
     }
+}
 
-    .steps {
-        flex-direction: column; /* Kotak menjadi vertikal */
-        align-items: center; /* Tengah untuk tampilan mobile */
+/* Untuk tampilan web, arah panah tetap horizontal */
+@media screen and (min-width: 769px) {
+    #swap-btn {
+        transform: rotate(0deg); /* Tidak ada rotasi untuk panah horizontal */
     }
 
-    .currency-group {
-        max-width: 100%; /* Lebar penuh untuk mode mobile */
+    /* Layout default untuk tampilan desktop */
+    .currency-select {
+        flex-direction: row; /* Elemen berada dalam baris */
     }
 }
 
@@ -240,4 +255,4 @@ body {
     .steps {
         gap: 15px; /* Kurangi jarak antar kotak di layar kecil */
     }
-}
+}