From c8f25d4065f3abe94c75231d8c53b0ab684c2d0a Mon Sep 17 00:00:00 2001
From: Charity <81490612+charitea@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:35:50 -0500
Subject: [PATCH] Make mobile experience better
---
css/bannerTransition.css | 34 ++++++----
css/indexDescription.css | 6 ++
css/style.css | 134 ++++++++++++++++++++-------------------
index.html | 22 ++++---
4 files changed, 107 insertions(+), 89 deletions(-)
diff --git a/css/bannerTransition.css b/css/bannerTransition.css
index 3a1be46..169ac1f 100644
--- a/css/bannerTransition.css
+++ b/css/bannerTransition.css
@@ -196,26 +196,31 @@
/* Media Queries */
@media (max-width: 768px) {
.banner-buttons {
- top: 60%;
- gap: 15px;
flex-direction: column;
- width: 80%;
+ align-items: center;
+ width: 90%;
max-width: 250px;
+ gap: 20px;
+ margin-top: 2rem;
}
- .banner-button {
- padding: 10px 20px;
- min-width: 120px;
- font-size: 16px;
- width: 100%;
+ .banner-button,
+ .banner-buttons .banner-button,
+ .banner-text .banner-button {
+ width: 250px !important;
+ min-width: 140px;
+ padding: 12px 32px;
+ font-size: 18px;
+ box-sizing: border-box;
}
-
+
.large-logo {
- height: 175px;
+ height: 150px;
+ margin-bottom: 1rem;
}
.banner-heading {
- font-size: 3rem;
+ font-size: 2rem;
}
}
@@ -246,10 +251,13 @@
.banner-buttons {
width: 90%;
max-width: 250px;
- gap: 8px;
+ gap: 15px;
}
- .banner-button {
+ .banner-button,
+ .banner-buttons .banner-button,
+ .banner-text .banner-button {
+ width: 200px !important;
padding: 6px 12px;
font-size: 13px;
min-width: 90px;
diff --git a/css/indexDescription.css b/css/indexDescription.css
index cb4a2b8..17b1443 100644
--- a/css/indexDescription.css
+++ b/css/indexDescription.css
@@ -266,6 +266,12 @@
gap: 1rem;
justify-content: center;
}
+
+ .indesc-servers-container {
+ width: 100%;
+ margin-top: 0;
+ border-radius: 0;
+ }
}
@media (max-width: 480px) {
diff --git a/css/style.css b/css/style.css
index 519727c..47d9383 100644
--- a/css/style.css
+++ b/css/style.css
@@ -10,6 +10,17 @@
border-radius: 8px;
}
+/* Add a container for the store promo content */
+.store-promo-container {
+ width: 100%;
+ max-width: 100%;
+ padding: 0;
+ margin: 0 auto;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+}
+
.promo-message-container {
height: 3rem;
margin-bottom: 0.5rem;
@@ -131,76 +142,67 @@
/* Media Queries */
@media (max-width: 768px) {
- .store-promo {
- width: 80%;
- margin: 1rem auto;
- padding: 1.5rem;
- }
-
- .promo-message {
- font-size: 1.75rem;
- }
-
- .promo-description {
- font-size: 0.9rem;
- padding: 0;
- margin-bottom: 1rem;
- }
-
- .promo-actions {
- flex-direction: column;
- padding: 0;
- }
+ .store-promo-container {
+ padding: 0;
+ width: 100%;
+ }
+
+ .store-promo {
+ width: 100%;
+ margin: 1rem 0;
+ padding: 1.5rem;
+ border-radius: 0;
+ max-width: none;
+ }
- .promo-actions .banner-button.store-button,
- .coupon-code {
- width: 90%;
- max-width: none;
- }
-}
-
-@media (max-width: 480px) {
- .store-promo {
- width: 75%;
- padding: 1.25rem;
- margin: 1rem auto;
- }
-
- .promo-message {
- font-size: 1.5rem;
- }
-
- .promo-description {
- font-size: 0.85rem;
- margin-bottom: 0.75rem;
- }
-
- .coupon-code {
- padding: 0.5rem;
- font-size: 0.9rem;
- }
-
- .promo-actions .banner-button.store-button {
- padding: 8px 16px;
- min-width: 100px;
- font-size: 14px;
- }
+ .promo-message {
+ font-size: 1.75rem;
+ }
+
+ .promo-description {
+ font-size: 0.9rem;
+ padding: 0;
+ margin-bottom: 1rem;
+ }
+
+ .promo-actions {
+ flex-direction: column;
+ padding: 0;
+ gap: 0.75rem;
+ align-items: center;
+ }
+
+ .promo-actions .banner-button.store-button,
+ .coupon-code {
+ width: 250px !important;
+ min-width: 140px;
+ padding: 12px 32px;
+ font-size: 18px;
+ box-sizing: border-box;
+ }
}
@media (max-width: 320px) {
- .store-promo {
- padding: 1rem;
- }
-
- .promo-message {
- font-size: 1.1rem;
- }
-
- .promo-actions .banner-button.store-button {
- padding: 6px 12px;
- min-width: 90px;
- font-size: 13px;
- }
+ .store-promo {
+ padding: 1.25rem;
+ }
+
+ .promo-message {
+ font-size: 1.5rem;
+ }
+
+ .promo-description {
+ font-size: 0.85rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .promo-actions .banner-button.store-button,
+ .coupon-code {
+ width: 200px !important;
+ padding: 6px 12px;
+ font-size: 13px;
+ min-width: 90px;
+ }
}
.site-footer {
diff --git a/index.html b/index.html
index e38b71b..3cc801d 100644
--- a/index.html
+++ b/index.html
@@ -107,16 +107,18 @@ Welcome to ZGRAD
-