Vertical align

devonoel · devonoel · commit 5692533456f4 · 2015-01-09T15:01:11.000-05:00
diff --git a/main.css b/main.css
@@ -22,9 +22,14 @@ body {
 }
 
 header {
-  padding: 0 25px 0 25px;
+  position: relative;
   max-width: 500px;
-  margin: 15% auto 0 auto;
+  margin: 0 auto;
+  padding: 0 25px 0 25px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
   border-right: 4px solid #C49A6C;
 }
 
@@ -93,6 +98,10 @@ header h2 {
 }
 
 @media screen and (min-width:550px) {
+  header {
+    max-width: 500px;
+  }
+
   header h1 {
     font-size: 4.1em;
   }

Original file line number	Diff line number	Diff line change
`@@ -22,9 +22,14 @@ body {`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`header {`
`25`		`- padding: 0 25px 0 25px;`
	`25`	`+ position: relative;`
`26`	`26`	`max-width: 500px;`
`27`		`- margin: 15% auto 0 auto;`
	`27`	`+ margin: 0 auto;`
	`28`	`+ padding: 0 25px 0 25px;`
	`29`	`+ top: 50%;`
	`30`	`+ -webkit-transform: translateY(-50%);`
	`31`	`+ -ms-transform: translateY(-50%);`
	`32`	`+ transform: translateY(-50%);`
`28`	`33`	`border-right: 4px solid #C49A6C;`
`29`	`34`	`}`
`30`	`35`
`@@ -93,6 +98,10 @@ header h2 {`
`93`	`98`	`}`
`94`	`99`
`95`	`100`	`@media screen and (min-width:550px) {`
	`101`	`+ header {`
	`102`	`+ max-width: 500px;`
	`103`	`+ }`
	`104`	`+`
`96`	`105`	`header h1 {`
`97`	`106`	`font-size: 4.1em;`
`98`	`107`	`}`