2 files changed, 37 insertions, 2 deletions
diff --git a/src/SMAPI.Web/Views/Shared/_Layout.cshtml b/src/SMAPI.Web/Views/Shared/_Layout.cshtml
index ac98c71b..d435e760 100644
--- a/src/SMAPI.Web/Views/Shared/_Layout.cshtml
+++ b/src/SMAPI.Web/Views/Shared/_Layout.cshtml
@@ -6,6 +6,7 @@
 <html>
 <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>@ViewData["Title"] - SMAPI.io</title>
     <link rel="stylesheet" href="~/Content/css/main.css" />
     @RenderSection("Head", required: false)
diff --git a/src/SMAPI.Web/wwwroot/Content/css/main.css b/src/SMAPI.Web/wwwroot/Content/css/main.css
index d1fa49e0..57eeee88 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/main.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/main.css
@@ -28,7 +28,8 @@ h2 {
 h3 {
     font-size: 1.2em;
     border-bottom: 1px solid #AAA;
-    width: 50%;
+    width: 55em;
+    max-width: 100%;
 }
 
 a {
@@ -44,6 +45,8 @@ a {
 
 #content {
     min-height: 140px;
+    width: calc(100% - 2em);
+    max-width: 60em;
     padding: 0 1em 1em 1em;
     border-left: 1px solid #CCC;
     background: #FFF;
@@ -51,7 +54,7 @@ a {
 }
 
 #content p {
-    max-width: 55em;
+    max-width: 100%;
 }
 
 .section {
@@ -105,3 +108,34 @@ a {
 #footer a {
     color: #669;
 }
+
+/* mobile fixes */
+@media (min-width: 1020px) and (max-width: 1199px) {
+    #sidebar {
+        width: 7em;
+        background: none;
+    }
+
+    #content-column {
+        left: 7em;
+    }
+}
+
+@media (max-width: 1019px) {
+    h1 {
+        margin-top: 0;
+    }
+
+    #sidebar {
+        margin-top: 0;
+        width: auto;
+        min-height: 0;
+        background: none;
+    }
+
+    #content-column {
+        position: inherit;
+        top: inherit;
+        left: inherit;
+    }
+}