Make mobile experience better

npc-servers · Dec 12, 2024 · c8f25d4 · c8f25d4
1 parent b9e3e0e
commit c8f25d4
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 89 deletions.
diff --git 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
@@ -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
@@ -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
@@ -107,16 +107,18 @@ <h2>Welcome to ZGRAD</h2>
             </div>
         </div>
     </div>
-    <div class="store-promo">
-        <div class="promo-message-container">
-            <h2 class="promo-message"></h2>
-        </div>
-        <p class="promo-description"></p>
-        <div class="promo-actions">
-            <a href="https://store.npcz.gg/category/garrys-mod-ranks" class="banner-button store-button">Visit Store</a>
-            <div class="coupon-code">
-                <span>Use Code:</span>
-                <code class="clickable-code"></code>
+    <div class="store-promo-container">
+        <div class="store-promo">
+            <div class="promo-message-container">
+                <h2 class="promo-message"></h2>
+            </div>
+            <p class="promo-description"></p>
+            <div class="promo-actions">
+                <a href="https://store.npcz.gg/category/garrys-mod-ranks" class="banner-button store-button">Visit Store</a>
+                <div class="coupon-code">
+                    <span>Use Code:</span>
+                    <code class="clickable-code"></code>
+                </div>
             </div>
         </div>
     </div>