Style fixes for mobile

Author: ardan-erick

public/2016/css/main.css

@@ -20,10 +20,16 @@ section {
 	background-size: 100%;
 	margin: -70px 0 0;
 }
+section .wrap {
+    width: 500px;
+    margin: 0 auto;
+    display: block;
+    text-align: center;
+}
 section img {
 	bottom: -80px;
 	display: block;
-	width: 500px;
+	width: 100%;
 	margin: 0 auto;
 	position: relative;
 	z-index: 2;
@@ -114,7 +120,7 @@ footer {
 
 /*-- Smallest devices (phones, 320px to 480px) --*/
 @media (min-width: 320px) and (max-width: 480px) {
-	section img {
+	section .wrap {
 		width: 250px;
 	}
 	h1 {
@@ -128,7 +134,7 @@ footer {
 
 /*-- Small devices (tablets, 481px to 767px) --*/
 @media (min-width: 481px) and (max-width: 767px) {
-	section img {
+	section .wrap {
 		width: 290px;
 	}
 	h1 {
@@ -142,7 +148,7 @@ footer {
 
 /*-- Medium devices (desktops, 768px to 991px) --*/
 @media (min-width: 768px) and (max-width: 991px) {
-	section img {
+	section .wrap {
 		width: 430px;
 	}
 }

public/2016/index.html

@@ -24,8 +24,11 @@
   <div class="clearfix"></div>
 
 <div class="wrapper">
+    
 <section>
+    <div class="wrap">
 	<img class="slideInDown animated" src="images/gophercon2016.svg" />
+    </div>
 </section>
 
 <h1 class="slideInLeft animated">July 11th - 13th, 2016 <br /> Denver, Colorado</h1>