Remove need to readjust margins in 404.html

Since some of the users prefer to just modify the placeholder 404 page instead of replacing it with their own, this commit makes it easier to do that by allowing them to modify the content without worrying about readjusting the margins. Ref h5bp/html5-boilerplate#1567 Close #219
h5bp · Aug 23, 2014 · aad88b5 · aad88b5
1 parent 8d2fc00
commit aad88b5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/404.html b/404.html
@@ -7,22 +7,23 @@
     <style>
 
         * {
-            line-height: 1.5;
+            line-height: 1.2;
             margin: 0;
         }
 
         html {
             color: #888;
+            display: table;
             font-family: sans-serif;
+            height: 100%;
             text-align: center;
+            width: 100%;
         }
 
         body {
-            left: 50%;
-            margin: -43px 0 0 -150px;
-            position: absolute;
-            top: 50%;
-            width: 300px;
+            display: table-cell;
+            vertical-align: middle;
+            margin: 2em auto;
         }
 
         h1 {
@@ -32,19 +33,19 @@
         }
 
         p {
-            line-height: 1.2;
+            margin: 0 auto;
+            width: 280px;
         }
 
-        @media only screen and (max-width: 270px) {
+        @media only screen and (max-width: 280px) {
 
-            body {
-                margin: 10px auto;
-                position: static;
+            body, p {
                 width: 95%;
             }
 
             h1 {
                 font-size: 1.5em;
+                margin: 0 0 0.3em 0;
             }
 
         }

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 == HEAD
 
+* Remove need to readjust margins in `404.html`
 * Update to Apache Server Configs 2.7.0
 * Add `Disallow:` to `robots.txt`
 * Update Modernizr to v2.8.3 (update to v2.8.2 see #211)