From b1940afc4ae71241e7e0edfc1492c92a3107b49f Mon Sep 17 00:00:00 2001
From: Michael Leon Putra Widhi <leonmichael463@gmail.com>
Date: Sat, 7 Oct 2023 11:33:24 +0700
Subject: [PATCH] feat : responsive topup page
---
scripts/client/public/css/pages/topup.css | 60 +++++++++++++++++++++++
1 file changed, 60 insertions(+)
diff --git a/scripts/client/public/css/pages/topup.css b/scripts/client/public/css/pages/topup.css
index e82c80c..6765cfe 100644
--- a/scripts/client/public/css/pages/topup.css
+++ b/scripts/client/public/css/pages/topup.css
@@ -3,6 +3,7 @@
padding-right: 2.5rem;
margin-top: 1rem;
height: 80vh;
+ overflow-y: auto;
}
.topupContainer {
@@ -13,6 +14,65 @@
column-gap: 2%;
}
+@media only screen and (max-width: 1035px) {
+ #topup {
+ height: 100% !important;
+ }
+
+ .topupContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ }
+
+ .mainTopupSec {
+ width: 100% !important;
+ height: 100%;
+ margin-top: 4rem;
+ margin-bottom: 2rem;
+ display: flex;
+ }
+
+ .historyTopupSec {
+ width: 100% !important;
+ height: 100%;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ display: flex;
+ }
+
+ .toupUpReq {
+ margin-bottom: 2rem;
+ }
+
+ .topuplogo {
+ width: 20% !important;
+ }
+
+ .topupSec {
+ margin-top: 1rem !important;
+ }
+}
+
+@media only screen and (max-width: 655px) {
+ .topuplogo {
+ width: 20% !important;
+ }
+}
+
+@media only screen and (max-width: 475px) {
+ .topuplogo {
+ width: 40% !important;
+ }
+
+ #amount {
+ width: 15rem !important;
+ height: 1rem !important;
+ padding: 1rem;
+ border-radius: 25px;
+ font-size: 1rem;
+ }
+}
+
.historyTopupSec {
width: 50%;
border-radius: 2rem;
--
GitLab