A few padding and flex fixes

sachanand · Oct 14, 2015 · 4178e48 · 4178e48
1 parent ba221dc
commit 4178e48
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/assets/css/3-sections/_home-articles.sass b/assets/css/3-sections/_home-articles.sass
@@ -3,16 +3,25 @@ section.articles
     image: url(../img/article-bg.jpg)
     repeat: repeat
 
+  .home-sections &
+    padding: 0
+
+    @media (max-width: 640px)
+      padding-bottom: 50px
+
   .col-1
     display: flex
     align-items: center
 
+    @media (max-width: 640px)
+      display: block
+
   .home-cta
     color: white
     background: #3d96cb
 
   .article-wrap
-    margin: -50px 0
+    //margin: -50px 0
     +clearfix
 
   .article-thumb

diff --git a/assets/css/3-sections/_home-youtube.sass b/assets/css/3-sections/_home-youtube.sass
@@ -42,7 +42,7 @@ section.youtube
 
     @media (max-width: 640px)
       height: auto
-      display block
+      display: block
       padding: 50px 20px
 
       &:last-child

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -892,6 +892,7 @@ section.youtube {
     @media (max-width: 640px) {
       section.youtube .col-1 {
         height: auto;
+        display: block;
         padding: 50px 20px; }
         section.youtube .col-1:last-child {
           padding: 0px 20px 50px; } }
@@ -975,22 +976,28 @@ section.mentoring {
 section.articles {
   background-image: url(../img/article-bg.jpg);
   background-repeat: repeat; }
+  .home-sections section.articles {
+    padding: 0; }
+    @media (max-width: 640px) {
+      .home-sections section.articles {
+        padding-bottom: 50px; } }
   section.articles .col-1 {
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-align-items: center;
         -ms-flex-align: center;
             align-items: center; }
+    @media (max-width: 640px) {
+      section.articles .col-1 {
+        display: block; } }
   section.articles .home-cta {
     color: white;
     background: #3d96cb; }
-  section.articles .article-wrap {
-    margin: -50px 0; }
-    section.articles .article-wrap::after {
-      clear: both;
-      content: "";
-      display: table; }
+  section.articles .article-wrap::after {
+    clear: both;
+    content: "";
+    display: table; }
   section.articles .article-thumb {
     display: block;
     background-size: cover;