From 1093c4534a877352236eea613c95d3935abdc8ac Mon Sep 17 00:00:00 2001
From: Justine Arreche <justinearreche@gmail.com>
Date: Thu, 2 Apr 2015 11:39:27 +0200
Subject: [PATCH] responsive adjustments to hero section

---
 app/styles/app/landing.sass | 38 +++++++++++++++++++++++++++++++------
 app/templates/home.hbs      |  2 +-
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass
index 5fd4e513..1e5bbe7d 100644
--- a/app/styles/app/landing.sass
+++ b/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
 
diff --git a/app/templates/home.hbs b/app/templates/home.hbs
index 5164dcb9..9081c48b 100644
--- a/app/templates/home.hbs
+++ b/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">