mobile fixes

dwilt · Jul 12, 2018 · d6f3148 · d6f3148
1 parent ff85e8b
commit d6f3148
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 18 deletions.
diff --git a/src/components/Completed/CompletedHeader/CompletedHeader.component.js b/src/components/Completed/CompletedHeader/CompletedHeader.component.js
@@ -16,7 +16,6 @@ export default class CompletedHeader extends PureComponent {
         const { name, score } = this.props;
 
         let subtitle = null;
-        let feedback = null;
         let text = null;
 
         const rating = getRating(score);
@@ -115,8 +114,7 @@ export default class CompletedHeader extends PureComponent {
                         className={'CompletedHeader__title'}
                     >{`Congratulations ${name}, you're finished!`}</h1>
                     <h2 className={'CompletedHeader__subtitle'}>{subtitle}</h2>
-                    <p dangerouslySetInnerHTML={{ __html: feedback }} />
-                    {text}
+                    <div className={'CompletedHeader__feedback'}>{text}</div>
                     <a
                         href={'https://calendly.com/danwiltcoaching/15min'}
                         className={'CompletedHeader__schedule-call-button btn'}

diff --git a/src/components/Completed/CompletedHeader/CompletedHeader.css b/src/components/Completed/CompletedHeader/CompletedHeader.css
@@ -16,12 +16,31 @@
     font-weight: 900;
 }
 
+@media (max-width: 767px) {
+    .CompletedHeader__title {
+        margin-bottom: 20px;
+        font-size: 2.4rem;
+    }
+}
+
+@media (max-width: 767px) {
+    .CompletedHeader__feedback {
+        font-size: 1.6rem;
+    }
+}
+
 .CompletedHeader__subtitle {
     font-size: 2.4rem;
     line-height: 1.3;
     margin-bottom: 20px;
 }
 
+@media (max-width: 767px) {
+    .CompletedHeader__subtitle {
+        font-size: 2rem;
+    }
+}
+
 .CompletedHeader__schedule-call-button {
     margin-top: 25px
 }
diff --git a/src/components/EmailCapture/EmailCapture/EmailCapture.css b/src/components/EmailCapture/EmailCapture/EmailCapture.css
@@ -3,6 +3,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 40px;
+}
+
+@media (max-width: 767px) {
+    .EmailCapture {
+        margin-top: 40px;
+    }
 }
 
 .EmailCapture__wrapper {
@@ -21,6 +28,12 @@
     margin-bottom: 10px;
 }
 
+@media (max-width: 767px) {
+    .EmailCapture__title {
+        font-size: 2.4rem;
+    }
+}
+
 .EmailCapture__description {
     margin-bottom: 40px;
 }

diff --git a/src/components/Landing/Landing/Landing.component.js b/src/components/Landing/Landing/Landing.component.js
@@ -12,20 +12,23 @@ export default class Landing extends React.PureComponent {
                     <h1 className={'Landing__title'}>
                         Do You Have What It Takes To Develop Mobile Apps?
                     </h1>
-                    <p>
-                        Note: This assessment is for developers who already have
-                        a basic understanding of HTML, CSS and Javascript. To
-                        get the most accurate results, use your current
-                        knowledge and skills to answer each question to the best
-                        of your ability, and avoid looking things up online.
-                    </p>
-                    <p>
-                        Don't worry about getting every answer correct. The
-                        questions range in subject matter and difficulty to
-                        accurately assess your readiness to successfully learn
-                        mobile app development and determine the right next
-                        steps for you should take to get started.
-                    </p>
+                    <div className={'Landing__notes'}>
+                        <p>
+                            Note: This assessment is for developers who already
+                            have a basic understanding of HTML, CSS and
+                            Javascript. To get the most accurate results, use
+                            your current knowledge and skills to answer each
+                            question to the best of your ability, and avoid
+                            looking things up online.
+                        </p>
+                        <p>
+                            Don't worry about getting every answer correct. The
+                            questions range in subject matter and difficulty to
+                            accurately assess your readiness to successfully
+                            learn mobile app development and determine the right
+                            next steps for you should take to get started.
+                        </p>
+                    </div>
                     <div className={'Landing__start-button'}>
                         <LandingGetStartedButton />
                     </div>

diff --git a/src/components/Landing/Landing/Landing.css b/src/components/Landing/Landing/Landing.css
@@ -19,11 +19,22 @@
 .Landing__title {
     margin-top: 120px;
     font-size: 3.2rem;
-    line-height: 4.2rem;
+    line-height: 1.3;
     font-weight: 800;
     margin-bottom: 20px;
 }
 
+@media (max-width: 767px) {
+    .Landing__title {
+        margin-top: 40px;
+        font-size: 2.4rem;
+    }
+}
+
+.Landing__notes {
+    font-size: 1.6rem;
+}
+
 .Landing__image {
     flex-shrink: 0;
     width: 40.4980237%;