mobile layout fixes

src/css/main.css

@@ -222,6 +222,7 @@ input[type=email] {
   background-position: center;
   background-size: 24px;
   background-repeat: no-repeat;
+  text-indent: -10000px;
   cursor: pointer; }
 
 .section-heading {
@@ -680,6 +681,13 @@ input[type=email] {
     font-weight: 400;
     font-size: 14px;
     line-height: 24px; }
+  .section-heading-even p:last-child {
+    position: absolute;
+    left: 65%;
+    margin-top: 30px; }
+    @media only screen and (max-width: 768px) {
+      .section-heading-even p:last-child {
+        position: static; } }
 
 .block-square {
   display: inline-block;
@@ -724,7 +732,7 @@ input[type=email] {
 
 .mobile-block-square {
   display: inline-block;
-  margin-top: 60px;
+  margin-top: 30px;
   padding: 25px 20px;
   width: 160px;
   height: 210px;
@@ -1140,6 +1148,9 @@ footer {
 .hashtag {
   color: #7099e6; }
 
+.section-row {
+  display: none; }
+
 /* Import Libs SASS/CSS */
 /**
  * Swiper 3.3.1
@@ -1206,6 +1217,7 @@ footer {
 .swiper-slide {
   -webkit-flex-shrink: 0;
   -ms-flex: 0 0 auto;
+  -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
           flex-shrink: 0;
   width: 100%;
@@ -1676,15 +1688,11 @@ body input:required:valid, body textarea:required:valid {
 /* ALWAYS END */
 /*==========  Desktop First Method  ========== */
 /* Large Devices, Wide Screens */
-@media only screen and (max-width: 1200px) {
-  /* */ }
-
 /* Medium Devices, Desktops */
-@media only screen and (max-width: 992px) {
-  /* */ }
-
 /* Small Devices, Tablets */
 @media only screen and (max-width: 768px) {
+  .table-center {
+    overflow: hidden; }
   .table-left, .table-right {
     display: block;
     width: 100%; }
@@ -1713,7 +1721,10 @@ body input:required:valid, body textarea:required:valid {
     margin: 0 auto;
     margin-bottom: 20px; }
   .mobile-hidden {
-    display: none; } }
+    display: none; }
+  .section-row {
+    display: block;
+    border-bottom: 1px solid #ddd; } }
 
 /* Extra Small Devices, Phones */
 @media only screen and (max-width: 480px) {
@@ -1745,29 +1756,42 @@ body input:required:valid, body textarea:required:valid {
   .footer-logo-mobile {
     display: block; }
   .section-heading-odd {
-    margin-left: 0; } }
+    margin-left: 0; }
+  .tags {
+    -webkit-transform: scale(0.8);
+        -ms-transform: scale(0.8);
+            transform: scale(0.8); } }
 
 /* Custom, iPhone Retina */
 @media only screen and (max-width: 320px) {
-  /* */ }
+  .status-email, .status-text {
+    width: 320px; }
+    .status-email > h1, .status-text > h1 {
+      font-size: 20px; }
+    .status-email > p, .status-text > p {
+      padding: 0 15px; }
+  .mobile-slider {
+    width: 320px; }
+  .section-heading-even, .section-heading-odd {
+    width: 320px; }
+    .section-heading-even > h2, .section-heading-odd > h2 {
+      font-size: 18px; }
+    .section-heading-even > p, .section-heading-odd > p {
+      padding: 0 15px; }
+  .tags {
+    left: -10px; }
+  .gradient-email, .gradient-text {
+    width: 320px; }
+    .gradient-email h2, .gradient-text h2 {
+      font-size: 20px; }
+  .section-gradient .section-gradient-text {
+    width: 320px; }
+    .section-gradient .section-gradient-text p {
+      font-weight: normal; } }
 
 /*==========  Mobile First Method  ========== */
 /* Custom, iPhone Retina */
-@media only screen and (min-width: 320px) {
-  /* */ }
-
 /* Extra Small Devices, Phones */
-@media only screen and (min-width: 480px) {
-  /* */ }
-
 /* Small Devices, Tablets */
-@media only screen and (min-width: 768px) {
-  /* */ }
-
 /* Medium Devices, Desktops */
-@media only screen and (min-width: 992px) {
-  /* */ }
-
 /* Large Devices, Wide Screens */
-@media only screen and (min-width: 1200px) {
-  /* */ }

src/index.html

@@ -54,7 +54,7 @@
                     <nav>
                         <ul>
                             <li><a href="#">Jobs</a></li>
-                            <li><a href="#">Features</a></li>
+                            <li><a href="#features">Features</a></li>
                             <li><a href="#">About</a></li>
 
                         </ul>
@@ -104,8 +104,7 @@
           </div>
         </div>
 
-
+        <div class="table-row mobile-hidden">
-        <div class="table-row">
           <div class="block block-white">
               <div class="block1-icon">
               </div>
@@ -117,7 +116,6 @@
               </div>
               <h3>Browse Decentralised Apps</h3>
               <p>Explore the next generation of apps, with the next generation of Browser.</p>
-              </p>
           </div>
           <div class="block block-white">
               <div class="block3-icon">
@@ -129,6 +127,44 @@
 
     </section>
 
+    <!-- Mobile Table-Row -->
+
+    <div class="section-row section-white">
+             <div class="mobile-slider">
+               <div class="swiper-container swiper1">
+                   <div class="swiper-wrapper">
+                       <div class="swiper-slide">
+                         <div class="mobile-block block-white">
+                             <div class="block1-icon">
+                             </div>
+                             <h3>Send, Receive, and Store Ether</h3>
+                             <p>Safely secure your Ether and other Ethereum crypto-assets.</p>
+                         </div>
+                       </div>
+                       <div class="swiper-slide">
+                         <div class="mobile-block block-white">
+                             <div class="block2-icon">
+                             </div>
+                             <h3>Browse Decentralised Apps</h3>
+                             <p>Explore the next generation of apps, with the next generation of Browser.</p>
+                         </div>
+                       </div>
+                       <div class="swiper-slide">
+                         <div class="mobile-block block-white">
+                             <div class="block3-icon">
+                             </div>
+                             <h3>Buy and Sell Ether Locally</h3>
+                             <p>Discover nearby Status users to exchange goods, services and ideas.
+                         </div>
+                       </div>
+                   </div>
+               </div>
+             </div>
+             <div class="table-one-third">
+             </div>
+
+           </div>
+
 
   <!-- Colourful blocks section for mobile layout
       Remove or comment out if not needed
@@ -224,7 +260,7 @@
 <!-- End colourful blocks section for mobile view -->
 
 
-    <section class="section-table section-white">
+    <section id="features" class="section-table section-white">
       <div class="table-center">
         <div class="table-wrapper">
 
@@ -417,8 +453,9 @@
           <div class="table-left">
             <div class="section-heading-even">
                 <h2>Buy and sell Ether nearby</h2>
-                <p>Find nearby Status users through our Discover feature. Exchange currency, services, and ideas to help grow the Ethereum community.<br><br>Sample Statuses:
+                <p>Find nearby Status users through our Discover feature. Exchange currency, services, and ideas to help grow the Ethereum community.</p>
-                </p>
+                <p>Sample Statuses:</p>
+
 
             </div>
 

src/sass/_media.scss

@@ -16,6 +16,10 @@
 
 @media only screen and (max-width: 768px) {
 
+  .table-center {
+    overflow: hidden;
+  }
+
   .table-left, .table-right {
     display: block;
     width: 100%;
@@ -69,6 +73,11 @@
     display: none;
   }
 
+  .section-row {
+    display: block;
+    border-bottom: 1px solid #ddd;
+  }
+
 }
 
 /* Extra Small Devices, Phones */
@@ -130,12 +139,51 @@
     margin-left: 0;
   }
 
+  .tags {
+    transform: scale(0.8);
+  }
+
 }
 
 /* Custom, iPhone Retina */
 
 @media only screen and (max-width: 320px) {
-  /* */
+  .status-email, .status-text {
+    width: 320px;
+    > h1 {
+      font-size: 20px;
+    }
+    > p {
+      padding: 0 15px;
+    }
+  }
+  .mobile-slider {
+    width: 320px;
+  }
+  .section-heading-even, .section-heading-odd {
+    width: 320px;
+    > h2 {
+      font-size: 18px;
+    }
+    > p {
+      padding: 0 15px;
+    }
+  }
+  .tags {
+    left: -10px;
+  }
+  .gradient-email, .gradient-text {
+    width: 320px;
+    h2 {
+      font-size: 20px;
+    }
+  }
+  .section-gradient .section-gradient-text {
+    width: 320px;
+    p {
+      font-weight: normal;
+    }
+  }
 }
 
 /*==========  Mobile First Method  ========== */

src/sass/index.scss

@@ -206,6 +206,7 @@ input[type=email] {
   background-position: center;
   background-size: 24px;
   background-repeat: no-repeat;
+  text-indent: -10000px;
   cursor: pointer;
 }
 
@@ -693,6 +694,14 @@ input[type=email] {
     font-size: 14px;
     line-height: 24px;
   }
+  p:last-child {
+    position: absolute;
+    left: 65%;
+    margin-top: 30px;
+    @media only screen and (max-width: 768px) {
+      position: static;
+    }
+  }
 }
 
 .block-square {
@@ -738,7 +747,7 @@ input[type=email] {
 
 .mobile-block-square {
   display: inline-block;
-  margin-top: 60px;
+  margin-top: 30px;
   padding: 25px 20px;
   width: 160px;
   height: 210px;
@@ -1173,3 +1182,7 @@ footer {
 .hashtag {
   color: #7099e6;
 }
+
+.section-row {
+  display: none;
+}