From a2cc48d37d615aa09255a0b9050b489905306b12 Mon Sep 17 00:00:00 2001
From: jaebradley <jae.b.bradley@gmail.com>
Date: Tue, 23 Jan 2018 15:21:13 -0500
Subject: [PATCH] fix mobile responsive modal

fix errors
---
 .../js/components/UpsellExperimentModal.jsx   |  6 ++--
 lms/static/sass/_experiments.scss             | 30 +++++++++++++++----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/common/static/common/js/components/UpsellExperimentModal.jsx b/common/static/common/js/components/UpsellExperimentModal.jsx
index 57f01a4338..c371731841 100644
--- a/common/static/common/js/components/UpsellExperimentModal.jsx
+++ b/common/static/common/js/components/UpsellExperimentModal.jsx
@@ -21,9 +21,9 @@ export class UpsellExperimentModal extends React.Component {
                 <div className="my-stats-introduction">My Stats introduces new personalized views that help you track your progress towards completing your course!</div>
                 <div className="my-stats-slide-header">With My Stats you will see your:</div>
                 <ul className="upsell-modal-checkmark-group">
-                    <li className="upsell-modal-checkmark">Course Activity Streak (log in every week to keep your streak alive)</li>
-                    <li className="upsell-modal-checkmark">Grade Progress (see how you're tracking towards a passing grade)</li>
-                    <li className="upsell-modal-checkmark">Discussion Forum Engagements (top learners use the forums - how do you measure up?)</li>
+                    <li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Course Activity Streak (log in every week to keep your streak alive)</li>
+                    <li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Grade Progress (see how you're tracking towards a passing grade)</li>
+                    <li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Discussion Forum Engagements (top learners use the forums - how do you measure up?)</li>
                 </ul>
             </div>),
             (<div>
diff --git a/lms/static/sass/_experiments.scss b/lms/static/sass/_experiments.scss
index bb1c4ed4ee..4356fa8acf 100644
--- a/lms/static/sass/_experiments.scss
+++ b/lms/static/sass/_experiments.scss
@@ -408,8 +408,12 @@
       width: 33%;
       display: block;
 
+      li {
+        margin: 0;
+      }
+
       li > button::before {
-        font-size: 15px;
+        font-size: 32px;
       }
     }
 
@@ -426,17 +430,25 @@
   .upsell-certificate {
     height: 43px;
     position: absolute;
-    left: 40%;
-    margin-top: 29px;
+    margin: 0;
+    bottom: -58px;
+    left: 220px;
   }
 
   .upsell-modal-checkmark-group {
     list-style: none;
-    margin-left: 0;
+    padding-left: 30px;
+    margin-bottom: 15px;
+
+    li {
+      margin-bottom: 15px;
+    }
   }
 
-  .upsell-modal-checkmark::before {
-    content: '✔️\00a0\00a0\00a0\00a0';
+  .upsell-modal-checkmark {
+    left: 10px;
+    position: absolute;
+    color: black;
   }
 
   .js-carousel-nav {
@@ -474,4 +486,10 @@
   .my-stats-slide-header {
     padding-bottom: 10px;
   }
+
+  @media only screen and (max-width: 600px){
+    .slick-slide.carousel-item {
+      min-width: 0;
+    }
+  }
 }