Merge pull request #3 from kjannette/rise3

Rise3

src/Components/Features/FeaturesPage.js

@@ -14,19 +14,22 @@ const FeaturesPage = () => {
     <>
       <div className="features-container">
         <div className="features-top-wrapper">
+          <div className="features-top-mobile-img">
+            <img className="features-image-one" src={legalTechFlip} />
+          </div>
           <div className="features-top-left">
             <FeaturesTop />
           </div>
           <div className="features-top-right">
             <img className="features-image-one" src={legalTechFlip} />
           </div>
-        </div>
-        <div className="features-bottom-wrapper">
-          <div className="features-bottom-right">
-            <img className="features-image-one" src={legalTek} />
-          </div>
-          <div className="features-bottom-left">
-            <FeaturesBottom />
+          <div className="features-bottom-wrapper">
+            <div className="features-top-mobile-img">
+              <img className="features-image-one" src={legalTek} />
+            </div>
+            <div className="features-bottom-left">
+              <FeaturesBottom />
+            </div>
           </div>
         </div>
       </div>
@@ -35,3 +38,16 @@ const FeaturesPage = () => {
 };
 
 export default FeaturesPage;
+
+/*
+
+        <div className="features-bottom-wrapper">
+          <div className="features-bottom-right">
+            <img className="features-image-one" src={legalTek} />
+          </div>
+          <div className="features-bottom-left">
+            <FeaturesBottom />
+          </div>
+        </div>
+
+  */

src/styles/features.scss

@@ -78,20 +78,77 @@
   margin: 28px 0px;
 }
 
+.features-top-mobile-img {
+  display: none;
+}
+
 @media only screen and (max-width: 430px) {
+  .features-container {
+    height: 1100px;
+  }
+
   .features-top-wrapper {
     flex-direction: column;
   }
+
+  .features-bottom-wrapper {
+    flex-direction: column;
+  }
+
   .features-top-left {
+    margin-top: 12px;
     width: 100%;
   }
+
+  .features-bottom-left {
+    margin-top: 12px;
+    width: 100%;
+  }
+
   .features-top-right {
     width: 100%;
   }
-  .features-bottom-left {
-    width: 100%;
-  }
+
   .features-bottom-right {
     width: 100%;
   }
+
+  .features-bottom-left {
+    width: 100%;
+  }
+
+  .features-header-text {
+    margin-top: 0px;
+    padding: 0px;
+  }
+
+  .features-list {
+    padding: 0px;
+    margin-left: 5px;
+  }
+
+  .features-list-item {
+    width: 98%;
+    text-align: justify;
+    font-size: 0.94rem;
+    margin: 6px 0px;
+  }
+
+  .features-top-right {
+    display: none;
+  }
+
+  .features-top-mobile-img {
+    display: flex;
+  }
+
+  .features-image-one {
+    display: flex;
+    flex-direction: column;
+    margin-right: 0px;
+    height: 100%;
+    width: 100%;
+    float: right;
+    border-radius: 15px;
+  }
 }