More style clean ups on league page

ProjectSourceCode/src/resources/css/league-pages/league-page.css

@@ -90,6 +90,11 @@
 =============================================
 */
 
+#table-and-top-scorers-containers {
+    display: flex;
+    flex-direction: row;
+}
+
 /* Styling for Standings and Top Scorers Cards */
 #table-stats-container, #top-scorers-stats-container 
 {
@@ -121,9 +126,12 @@
 */
 
 /* Width of Screen is Less Than 950px */
-@media (max-width: 950px) 
+@media (max-width: 1230px) 
 {
-    
+    #table-and-top-scorers-containers {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
     

ProjectSourceCode/src/resources/css/league-pages/league-table.css

@@ -1,4 +1,5 @@
-#league-table-and-information-container {
+/* Container for all table elements */
+#league-table-container {
     width: 60%;
     justify-content: center;
     align-items: center;
@@ -6,10 +7,7 @@
     transition: transform 0.3s ease; /* Add smooth transition effect */
 }
 
-#standings-table {
-    width: 100%;
-    padding: 15px;
-}
+
 
 #table-stats-container {
    width: 100%;
@@ -19,7 +17,13 @@
     border-bottom: 3px solid red; /* Add red bottom border */
 }
 
-#club-logo-row {
+#standings-table {
+    width: 100%;
+    padding: 15px;
+}
+
+/* */
+#club-logo-column {
     width: 25px; 
 }
 
@@ -30,7 +34,7 @@
 
 }
 
-#club-name {
+#club-name-column {
     cursor: pointer;
 }
 
@@ -62,8 +66,9 @@
     }
 }
 
-@media (max-width: 950px) {
-    #league-table-and-information-container {
-        width: 100%; /* Set the width to 60% when window width is less than 1161px */
+@media (max-width: 1230px) {
+    #league-table-container {
+        align-items: center;
+        width: 75%;
     }   
 }

ProjectSourceCode/src/resources/css/league-pages/top-scorers.css

@@ -1,6 +1,5 @@
 #top-scorers-container {
-    flex: 1;
-    width: 100%;
+    width: 35%;
     /* Add any other styling you need for the top scorers container */
 }
 
@@ -29,3 +28,10 @@
 #club-name-column {
     padding-right: 15px;
 }
+
+@media (max-width: 1230px) {
+    #top-scorers-container {
+        align-items: center;
+        width: 75%;
+    }   
+}

ProjectSourceCode/src/views/pages/leagues-page.hbs

@@ -38,8 +38,8 @@
                         {{#each league.standings}}
                         <tr>
                             <td>{{table.league_position}}</td>
-                            <td id="club-logo-row"><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="table-club-logo" clubID="{{table.team_id}}"></td>
-                            <td><span id="club-name" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
+                            <td id="club-logo-column"><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="table-club-logo" clubID="{{table.team_id}}"></td>
+                            <td><span id="club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
                             <td>{{games_played}}</td>
                             <td>{{wins}}</td>
                             <td>{{losses}}</td>