Modified style of games page

Made sure button is centered for all screen sizes
ALEEF02 · Nov 4, 2022 · b95519f · b95519f
1 parent 83ab92c
commit b95519f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/MavenBack/src/main/webapp/games.html b/MavenBack/src/main/webapp/games.html
@@ -230,12 +230,15 @@ <h1 class = "heading"><u>Create new game:</u></h1>
 			<input type="number" id="myScore" placeholder="1">
 			<p>Their Score:</p>
 			<input type="number" id="theirScore" placeholder="21">
+			<div class = "buttonContainer">
 			<p>
 				<button type="button" id="submitButton" onclick="submitGame()">Submit Game</button>
 			</p>
+			</div> 
 		</div>
 		<div class ="pendingGames">
 		<h1 class = "heading"><u>Your Pending Games:</u></h1>
+		<div style="overflow-x:auto;">
 		<table id="gamesTable" class="leaderboard"> <!-- Using this class as a temporary to look decent while I work on the backend & functionality -->
 			<thead>
 				<tr>
@@ -251,6 +254,7 @@ <h1 class = "heading"><u>Your Pending Games:</u></h1>
 			</tbody>
 		</table>
 		</div>
+		</div>
 
 	</body>
 </html>
diff --git a/MavenBack/src/main/webapp/gamesStyle.css b/MavenBack/src/main/webapp/gamesStyle.css
@@ -7,17 +7,13 @@ p, h1, th, td{color: white;}
 
 .pendingGames{
 	float: right;
-	margin-top: 20px;
-	margin-right: 20px;
-	margin-bottom: 20px;	
+	padding: 10px;	
 	width: 75%;
 	/*background: #262521;*/
 }
 .recent{
 	float: left;
-	margin-top: 20px;
-	margin-left: 20px;
-	margin-bottom: 20px;
+	padding: 10px;
 	width: 20%;
 	/*background: #262521;*/
 
@@ -46,6 +42,12 @@ input[type=text], input[type=number]{
 
   color: white;
 }
+.buttonContainer{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+}
 #submitButton{
 	/*background-color: #7fa751;*/
 	background-color: #8c463d;
@@ -57,8 +59,8 @@ input[type=text], input[type=number]{
 	height: 60px;
 	font-size: 24px;
 
-	position: relative;
-	left: 50px;
+	/*position: relative;
+	left: 50px;*/
 
 
 	cursor: pointer;
@@ -76,9 +78,9 @@ input[type=text], input[type=number]{
 	}
 
 	input[type=text], input[type=number]{
-	margin: 0px;	
+		margin: 0px;	
+		width: 100%;
 	}
-	#submitButton{left: 35%;}
 
 }