Make the page responsive down to 780px by switching to a table layout. Further scaling is possible if we want to remove elements from the header.

Author: brendanlong

r2/r2/public/static/discussion.css

@@ -63,11 +63,8 @@
 #header.discussion {
 	background: url(/static/background-discussion.jpg) no-repeat top left;
 }
-
-#header.discussion #header-img {
-	height: 55px;
+@media (max-width: 975px) {
+	img#tagline {
+		display: none !important;
+	}
 }
-
-#header.discussion #tagline {
-	display: none;
-}

r2/r2/public/static/lesswrong.css

@@ -1,6 +1,6 @@
 #content.clear.fullwidth {
     padding: 0 15px;
-    width: 920px;
+    max-width: 920px;
 }
 
 div.comment-meta span span {

r2/r2/public/static/logo-discussion.png

@@ -30,6 +30,8 @@ body {
 	background-color: #d8d8d8;
 	margin: 0;
 	padding: 0;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
 #wrapper {
 	background-color: #fff;
@@ -38,19 +40,29 @@ body {
 	box-shadow: 0px 0px 10px #555;
 	margin: 0 auto;
 	padding: 0;
-	width: 990px;
+	max-width: 990px;
+	min-width: 780px;
 }
 #main {
-	padding: 15px 20px;
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+	
 }
 #content {
-	float: left;
-	padding: 0 0 0 15px;
-	width: 695px;
+	width: 100%;
+	padding: 15px 20px 20px 35px;
 }
 #sidebar {
-	float: right;
 	width: 220px;
+	padding: 15px 20px 20px 0;
+}
+#header {
+	overflow: hidden;
+}
+#content, #sidebar {
+	display: table-cell;
+	vertical-align: top;
 }
 
 
@@ -200,7 +212,9 @@ input, select, textarea, button {
 a#logo {
   display: block;
   float: left;
-  margin: 35px 10px 0 35px;
+  height: 54px;
+  overflow: hidden;
+  margin: 35px 10px 14px 35px;
 }
 img#tagline {
   display: block;

r2/r2/public/static/main.css

@@ -37,6 +37,18 @@
       <meta name="description" content="${description | h}" />
     %endif
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>
+      /* Set initial screen size for screens smaller than our max width.
+       * This is necessary because the viewport tag stupidly forces a zoom
+       * and has no way to set the minimum width.
+       * Note: This doesn't work on Firefox Mobile :(
+       */
+      if (screen.width < 780) {
+        var viewport = document.getElementById("viewport");
+        viewport.setAttribute("content", "width=780");
+      }
+    </script>
     ${self.robots()}
     ##these are globals, so they should be run first
     ##things that need are referenced by the reddit, the buttons, and