Optimizes the page for mobile screen sizes (#31)

w3c · Jun 17, 2022 · 9fb67fe · 9fb67fe
1 parent f275235
commit 9fb67fe
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Document Review</title>
 <script src="toc.js"> </script>
 <link rel="stylesheet" href="https://www.w3.org/Guide/assets/main.css">
@@ -277,6 +278,6 @@ <h2><a href="#enhancement_requests">Enhancement Requests</a></h2>
 <script>
 createtoc(3)
 </script>
-<script type="text/javascript" src="createGitHubIssue.js"></script>
+<script src="createGitHubIssue.js"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -21,8 +21,20 @@
 body { 
 	font-family: RalewayWF;
 	line-height: 1.6;
-	padding: 2em 4em; 
+    margin-inline: 3em;
+    margin-block: 0;
+    padding-inline: 4em;
+    padding-block: 2em;
 	}
+
+@media (max-width: 600px) {
+    body {
+        margin-inline: auto;
+        width: clamp(16rem, 95vw, 85rem);
+        padding-inline: clamp(1.4rem, 1.5rem, 2rem);
+        }
+    }
+
 h2 { 
 	margin-top: 3em;
 	}