From 070b35085e4450327f7a386e24babfcf38f2a84d Mon Sep 17 00:00:00 2001
From: billc27 <110593711+billc27@users.noreply.github.com>
Date: Sat, 7 Oct 2023 03:21:28 +0700
Subject: [PATCH] feat: make settings page more responsive
---
scripts/client/public/css/pages/settings.css | 41 ++++++++++++++++++++
1 file changed, 41 insertions(+)
diff --git a/scripts/client/public/css/pages/settings.css b/scripts/client/public/css/pages/settings.css
index 28cbd37..0a7e3d0 100644
--- a/scripts/client/public/css/pages/settings.css
+++ b/scripts/client/public/css/pages/settings.css
@@ -16,6 +16,23 @@
}
+@media screen and (max-width: 900px) {
+ .acct-ctn {
+ width: fit-content;
+ height: fit-content;
+ margin: 3% 0;
+ padding: 5% 10% 25%;
+ }
+}
+
+@media screen and (min-width: 900px) and (max-width: 1280px) {
+ .acct-ctn {
+ width: 80%;
+ margin: 3% 0;
+ }
+}
+
+
.acct-title {
display: flex;
font-weight: 700;
@@ -88,13 +105,37 @@ button[type=submit]:hover {
}
@media screen and (max-width: 900px) {
+ .acct-title {
+ font-size: medium;
+ }
+
.grid-container {
grid-template-columns : auto;
width : auto;
margin: 3% 0;
+ gap: 2%;
+ font-size: small;
+ }
+
+ #balance {
+ margin-bottom: 5%;
}
button[type=submit] {
grid-column : span 1;
}
+}
+
+@media screen and (min-width: 900px) and (max-width: 1280px) {
+ .grid-container {
+ grid-template-columns : auto;
+ width : auto;
+ margin: 3% 0;
+ gap: 4%;
+ font-size: small;
+ }
+
+ #balance {
+ margin-bottom: 8%;
+ }
}
\ No newline at end of file
--
GitLab