docs: change tablet layout

SAP · Aug 19, 2020 · 848bbd0 · 848bbd0
1 parent 1a938a2
commit 848bbd0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/docs/_sass/_landingPage.scss b/docs/_sass/_landingPage.scss
@@ -500,21 +500,26 @@ $learn-section-side-margin: 0 2rem;
 }
 
 @media (min-width: 768px) {
+  .about-section {
+    &__item {
+      text-align: left;
+    }
+  }
 
   .section {
     flex-direction: column;
-    padding: 5rem 2rem 0 2rem;
+    padding: 5rem 120px 0 120px;
 
     &--learn {
-      padding: 2.75rem 0 0 0;
+      padding-top: 2.75rem;
     }
 
     &__button {
       margin-top: 1.25rem;
     }
 
     &__container {
-      flex-direction: row;
+      flex-direction: column;
       justify-content: space-between;
       align-items: flex-start;
       padding: 0;
@@ -525,6 +530,7 @@ $learn-section-side-margin: 0 2rem;
 
     &__container-inner {
       flex-direction: row;
+      flex-wrap: wrap;
       padding: 0 0.5rem;
     }
 
@@ -538,14 +544,18 @@ $learn-section-side-margin: 0 2rem;
       text-align: center;
       margin-bottom: 2.75rem;
       padding: 0 0.5rem;
-      max-width: 33%;
+      max-width: 100%;
 
       &--learn {
         padding: 0;
-        margin: 0 2rem;
+        width: 48%;
         border-radius: 8px;
       }
 
+      &--youtube {
+        width: 100%;
+      }
+
       &--img {
         text-align: left;
       }
@@ -586,7 +596,6 @@ $learn-section-side-margin: 0 2rem;
 
 @media (min-width: 1024px) {
   .section {
-
     &__container {
       flex-direction: row;
       justify-content: space-between;
@@ -595,6 +604,12 @@ $learn-section-side-margin: 0 2rem;
         padding: 0 7.5rem 0 7.5rem;
       }
     }
+
+    &__item {
+      &--learn {
+        width: 30%;
+      }
+    }
   }
 }
 

diff --git a/docs/index.html b/docs/index.html
@@ -232,14 +232,14 @@ <h3>Blog Posts</h3>
           </div>
           <img alt="blog" src="./images/ipad-example.jpg"/>
         </div>
+        <div class="section__item section__item--learn">
+          <a class="twitter-timeline" href="https://twitter.com/fundamental_lib?ref_src=twsrc%5Etfw">Tweets by fundamental_lib</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+        </div>
         <div class="section__item section__item--learn section__item--youtube">
           <iframe type="text/html" width="1px" class="section__logo section__logo--learn"
           src="https://www.youtube.com/embed/?listType=playlist&list=PLChUxte5emJbKO8z7K68tBeXdlwi8ZFkv"
           frameborder="0"></iframe>
         </div>
-        <div class="section__item section__item--learn">
-          <a class="twitter-timeline" href="https://twitter.com/fundamental_lib?ref_src=twsrc%5Etfw">Tweets by fundamental_lib</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-        </div>
       </div>
   </section>