responsive tableau

assets/css/page/planning.css

@@ -5,6 +5,18 @@ main {
 	width: 100%;
 }
 
+section {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}
+
 table {
 	margin: 50px;
 	border-collapse: collapse;
@@ -30,7 +42,7 @@ table td {
 .tr-th th {
 	padding: 20px;
 	color: black;
- 	font-size: 30px;
+ 	font-size: 1.2rem;
 }
 
 .tr-td {
@@ -51,14 +63,14 @@ div.content {
 	border: 2px solid black;
 }
 
-section {
-	display: block;
-	background-color: rgba(255,255,255,0.5);
-	width: 80%;
-	max-width: 800px;
-	margin-left: auto;
-	margin-right: auto;
-	padding: 50px;
-	font-size: 1.2rem;
-	margin-top: 40px;
+@media (max-width: 1020px) {
+	table {
+		width: 100%;
+	}
+
+	.tr-th th {
+		height: width;
+		padding: 5px;
+	 	font-size: 0.5rem;
+	}
 }