fix mobile scaling CSS issues

1 files changed, 85 insertions, 0 deletions

diff --git a/tiers.css b/tiers.css
index 0f8f1db..c2e9fca 100644
--- a/tiers.css
+++ b/tiers.css
@@ -201,3 +201,88 @@ img:hover {
 .row-buttons, .top-container, .images {
 	display: none !important;
 }
+
+/* ...existing code... */
+
+/* Add these media queries at the end of the file */
+@media screen and (max-width: 768px) {
+    .tierlist span {
+        min-width: 60px;
+        min-height: 60px;
+        font-size: 20px;
+    }
+
+    .tierlist div.row {
+        height: auto;
+        min-height: 60px;
+        flex-direction: column;
+    }
+
+    span.header {
+        width: 100%;
+        height: 40px;
+    }
+
+    span.items {
+        padding: 5px;
+        min-height: 60px;
+    }
+
+    img {
+        max-height: 60px;
+    }
+
+    .button {
+        height: 60px;
+        width: 60px;
+    }
+
+    .button img {
+        width: 40px;
+    }
+
+    .buttons-container {
+        gap: 10px;
+        flex-wrap: wrap;
+    }
+
+    .modal-content {
+        padding: 15px;
+        width: 95%;
+    }
+
+    #modal-title, #modal-description {
+        width: 90%;
+    }
+
+    #modal-description {
+        height: 20vh;
+    }
+
+    .title {
+        font-size: 20px;
+        margin-bottom: 10px;
+    }
+}
+
+/* For very small screens */
+@media screen and (max-width: 480px) {
+    .tierlist span {
+        min-width: 50px;
+        min-height: 50px;
+        font-size: 16px;
+    }
+
+    .button {
+        height: 50px;
+        width: 50px;
+    }
+
+    .button img {
+        width: 30px;
+    }
+
+    img {
+        max-height: 50px;
+    }
+}
\ No newline at end of file