From 466588d1d6be900d989f0ccc1f864e92a87a8b96 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Mon, 23 Nov 2015 11:36:44 +0100
Subject: [PATCH] remove flexbox on small screens because it causes too much
 troubl eon safari

---
 app/styles/app/pages/home-pro.sass | 38 +++++++++++++-----------------
 app/templates/home-pro.hbs         | 24 +++++++++----------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/app/styles/app/pages/home-pro.sass b/app/styles/app/pages/home-pro.sass
index b8286fe8..a40ae150 100644
--- a/app/styles/app/pages/home-pro.sass
+++ b/app/styles/app/pages/home-pro.sass
@@ -181,13 +181,11 @@ $grey: #858585
 
   .section--feature
     .inner
-      display: flex
-      justify-content: space-between
-      flex-direction: column-reverse
-      align-items: center
       @media #{$medium-up}
-        flex-direction: row
-    
+        flex-direction: row-reverse
+        display: flex
+        justify-content: space-between
+        align-items: center
     .section-list,
     .section-text
       flex: 0 0 48%
@@ -198,15 +196,12 @@ $grey: #858585
         @extend .text-big
         line-height: 1.65
 
-
   .section--hero
     .inner
-      display: flex
-      justify-content: space-between
-      flex-direction: column
       @media #{$medium-up}
+        display: flex
+        justify-content: space-between
         flex-direction: row
-    
     .section-text
       flex: 0 0 47%
       text-align: center
@@ -228,12 +223,13 @@ $grey: #858585
 
   .list--customers
     @extend %list
-    display: flex
-    justify-content: space-around
-    flex-wrap: wrap
-    align-items: center
     width: 80%
     margin: 2em auto 0
+    @media #{$medium-up}
+      display: flex
+      justify-content: space-around
+      flex-wrap: wrap
+      align-items: center
     li
       flex: 0 0 9em
       margin-bottom: 3em
@@ -242,9 +238,10 @@ $grey: #858585
 
   .list--languages
     @extend %list
-    display: flex
-    justify-content: space-around
-    flex-wrap: wrap
+    @media #{$medium-up}
+      display: flex
+      justify-content: space-around
+      flex-wrap: wrap
     li
       flex: 0 0 5em
 
@@ -272,11 +269,10 @@ $grey: #858585
 
   .list--features
     @extend %list
-    display: flex
-    justify-content: space-between
-    flex-flow: column wrap
     margin-top: 5em
     @media #{$medium-up}
+      display: flex
+      justify-content: space-between
       flex-flow: row wrap
       margin-top: 1em
     li
diff --git a/app/templates/home-pro.hbs b/app/templates/home-pro.hbs
index d6e6494a..f787aae8 100644
--- a/app/templates/home-pro.hbs
+++ b/app/templates/home-pro.hbs
@@ -25,6 +25,18 @@
   </section>
   <section class="section--feature section--grey">
     <div class="inner">
+      <div class="section-text">
+        <h2 class="h2--green">Features created to help your projects and teams</h2>
+        <ul class="list--check">
+          <li>Watch your tests as they run</li>
+          <li>Keep your config with your code</li>
+          <li>Slack, HipChat, Emails and more</li>
+          <li>A clean VM for every build</li>
+          <li>Run your tests in parallel</li>
+          <li>Linux and Mac (and iOS) supported</li>
+          <li>Great API and command line tool</li>
+        </ul>
+      </div>
       <div class="section-list section--center">
         <ul class="list--features">
           <li>
@@ -49,18 +61,6 @@
           </li>
         </ul>
       </div>
-      <div class="section-text">
-        <h2 class="h2--green">Features created to help your projects and teams</h2>
-        <ul class="list--check">
-          <li>Watch your tests as they run</li>
-          <li>Keep your config with your code</li>
-          <li>Slack, HipChat, Emails and more</li>
-          <li>A clean VM for every build</li>
-          <li>Run your tests in parallel</li>
-          <li>Linux and Mac (and iOS) supported</li>
-          <li>Great API and command line tool</li>
-        </ul>
-      </div>
     </div>
   </section>
   <section class="section--white section--center">