From 635e25e5fd4223a7fb41bb1f31dd283c866d0210 Mon Sep 17 00:00:00 2001
From: AlecM33 <leohfx@gmail.com>
Date: Thu, 24 Feb 2022 23:40:24 -0500
Subject: [PATCH] Make several elements take up less space on mobile game page

---
 client/src/styles/game.css | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index 5af7aed..510d62f 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -679,8 +679,12 @@ label[for='moderator'] {
 }
 
 @media(max-width: 500px) {
+    label {
+        font-size: 18px;
+    }
+
     #client-name {
-        font-size: 25px;
+        font-size: 20px;
     }
 
     #client-user-type, #game-parameters {
@@ -709,8 +713,13 @@ label[for='moderator'] {
     }
 
     #game-timer {
+        padding: 5px;
         font-size: 30px;
-        height: 38px;
+        height: 30px;
+    }
+
+    #role-info-button {
+        padding: 7px;
     }
 
     #players-alive-label {
@@ -727,8 +736,8 @@ label[for='moderator'] {
     }
 
     #game-role, #game-role-back {
-        height: 20em;
-        max-width: 15em;
+        height: 18em;
+        max-width: 13em;
     }
 
     #client-container {
@@ -740,12 +749,21 @@ label[for='moderator'] {
     }
 
     #game-role-back h4 {
-        font-size: 20px;
+        font-size: 18px;
     }
 
     h2 {
         font-size: 18px;
     }
+
+    #role-description {
+        font-size: 14px;
+        max-height: 7em;
+    }
+
+    #role-image {
+        width: 70%;
+    }
 }
 
 @keyframes pulse {