feat/frontend: add general mobile support (#275)

1 files changed, 32 insertions, 1 deletions

diff --git a/frontend/src/css/Rankings.css b/frontend/src/css/Rankings.css
index edc5a00..b644ecd 100644
--- a/frontend/src/css/Rankings.css
+++ b/frontend/src/css/Rankings.css
@@ -27,7 +27,8 @@
     transition: all 0.1s;
 }
 
-.nav-container button:hover, .nav-container button.selected {
+.nav-container button:hover,
+.nav-container button.selected {
     background-color: #202232;
 }
 
@@ -105,3 +106,33 @@
     border-radius: 200px;
     transform: translateX(10px);
 }
+
+@media screen and (max-width: 768px) {
+
+    .nav-1 div,
+    .nav-2 div {
+        width: 95%;
+    }
+
+    .nav-container button {
+        font-size: 18px;
+        padding: 8px 0px;
+    }
+
+    .ranks-container {
+        width: calc(95% - 20px);
+    }
+
+    .rankings-leaderboard {
+        font-size: 16px;
+    }
+
+    .leaderboard-entry {
+        grid-template-columns: 15% 50% 35%;
+        font-size: 14px;
+    }
+
+    .leaderboard-entry img {
+        height: 28px;
+    }
+}
\ No newline at end of file