css responsive

dashboard_static/style/responsive.css

@@ -0,0 +1,33 @@
+@media only screen and (max-width: 1280px) {
+    .maintable {
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 32px;
+    }
+}
+
+
+@media only screen and (max-width: 850px) {
+    .maintable {
+        grid-template-columns: 1fr;
+    }
+    .header-title {
+        display: none;
+    }
+    .sport-name {
+        font-size: 20px;
+    }
+    .column {
+        grid-row: unset;
+    }
+    .colheader {
+        font-size: 32px;
+    }
+
+}
+
+
+
+
+
+  /* 360x640 414x896
+  601x962 1280x800 */

dashboard_static/style/style.css

@@ -24,6 +24,8 @@ body {
 	background-color: var(--main-bg);
 	color: white;
 	padding: 16px 48px;
+	display: flex;
+	flex-direction: column;
 }
 
 .header, .sports, .logo {
@@ -45,11 +47,11 @@ body {
 }
 
 .logo img {
-	height: 40px;
+	height: 36px;
 }
 
 .logo span {
-	font-size: 40px;
+	font-size: 36px;
 	font-weight: 500;
 	margin: 0 8px;
 }
@@ -112,7 +114,7 @@ body {
 .tweet-interaction {
 	display: flex;
 	align-items: center;
-	margin-right: 32px;
+	margin-right: 24px;
 }
 
 .tweet-interaction .material-symbols-outlined {
@@ -147,44 +149,55 @@ body {
 /* Three main columns; CSS Grid */
 .maintable {
 	/*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */
-	display: grid;
 	width: 100%;
+	height: 100%;
+	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: 1fr 1fr;
-
-	gap: 48px;
+	grid-template-rows: 1fr;
+	grid-gap: 48px;
 	/* margin:20px; */
 }
 
 .main {
-	margin-top: 48px;
+	margin-top: 32px;
+	height: 100%;
 }
 
 .column {
 	border-radius: 16px;
 }
 
+.leftcol, .centercol {
+	overflow-y: auto;
+	grid-row: 1/ -1;
+}
+
 .leftcol {
 	background-color: red;
-	grid-row: 1/ -1;
 }
 
 .centercol {
 	background-color: green;
-	grid-row: 1/ -1;
+}
+
+.rightcol {
+	display: flex;
+    flex-direction: column;
 }
 
 .searchbar {
 	background-color: blue;
-	height: 400px;
+	/* height: 400px; */
 }
 
 .popchart {
 	background-color: rgba(255, 0, 255, 0.344);
-	height: 400px;
+	/* height: 400px; */
 }
 
 .colheader {
-	font-size: 38px;
-	padding-left: 30px;
+	display: block;
+	font-weight: 500;
+	font-size: 40px;
+	padding: 8px 16px;
 }