responsive adjustments to hero section

app/styles/app/landing.sass

@@ -80,6 +80,9 @@
       line-height: 1.5em
       max-width: 380px
 
+    br.mobile-break
+      display: none
+
     .button
       background-color: #39a85b
       color: #fff
@@ -257,6 +260,35 @@
     .landing-centered-wrapper
       width: 100%
 
+  @media (max-width: 886px)
+    .laptop-wrapper-mobile
+      display: block
+      width: 100%
+
+    .hero .laptop-wrapper-mobile #laptop img
+      width: 80%
+      margin-left: 9%
+
+    .laptop-wrapper
+      display: none
+
+    #hero-copy
+      display: block
+      width: 100%
+      text-align: center
+
+    .hero h1
+      margin-top: 40px
+      text-align: center
+      max-width: 100%
+
+    .hero p
+      text-align: center
+      max-width: 100%
+
+    .hero br.mobile-break
+      display: inline-block
+
   @media (max-width: 846px)
     .build-flows .branch-bf .bf
       width: 100%
@@ -281,12 +313,6 @@
       margin-bottom: 10px
 
   @media (max-width: 797px)
-    .laptop-wrapper-mobile
-      display: block
-
-    .laptop-wrapper
-      display: none
-
     .customers .left
       text-align: center
 

app/templates/home.hbs

@@ -9,7 +9,7 @@
 
 			<div class="medium-6 columns" id="hero-copy">
 	    	<h1>Test and deploy<br>with confidence</h1>
-	    	<p>Easily sync projects with Github and you’ll be testing your in minutes!</p>
+	    	<p>Easily sync projects with Github<br class="mobile-break"> and you’ll be testing your in minutes!</p>
 	    	<a href="#" class="button"><img src="../images/landing-page/sign-in-mascot.svg" class="sign-in-mascot">Sign Up</a>
 	    </div>
 	    <div class="medium-6 columns laptop-wrapper">