Add mobile scaling to the grid layout

1 files changed, 41 insertions, 2 deletions

diff --git a/assets/scss/articles.scss b/assets/scss/articles.scss
index b45cc3f..240f070 100644
--- a/assets/scss/articles.scss
+++ b/assets/scss/articles.scss
@@ -28,7 +28,7 @@
   
     /*TABLET*/
     @media screen and (max-width: $tablet){
-      display: none;
+      display: none !important;
     }
 }
 
@@ -339,10 +339,16 @@
     justify-content: space-between;
     width: 100%;
     margin-bottom: 100px;
+
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      flex-wrap: wrap;
+      justify-content: center;
+    }
 }
 
 .article-link{
-    max-width: 48.5%;
+    max-width: 39.5%;
     position: relative;
     display: block;
     width: 100%;
@@ -380,9 +386,29 @@
       background: rgba(255, 255, 255, 0.01);
       border-radius: 5px;
     }
+
+    /*DESKTOP MEDIUM*/
+    @media screen and (max-width: $desktop_medium){
+      max-width: 48.5%;
+    }
+
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      min-width: 80% !important;
+      display: block;
+      margin-bottom: 60px;
+
+      p{
+        padding: 0;
+      }
+    }
   
     /*PHABLET*/
     @media screen and (max-width: $phablet){
+      min-width: 100% !important;
+      margin-bottom: 40px;
+      box-shadow: 0px 20px 40px rgba(0,0,0,0.2);
+
       &:hover .image-container {
         transform: none;
         box-shadow: initial;
@@ -391,5 +417,18 @@
       &:active {
         transform: scale(0.97) translateY(3px);
       }
+
+      p{
+        padding: 30px 20px 0;
+      }
     }
+}
+
+#article-link-bigger{
+  max-width: 58.5% !important; 
+
+  /*DESKTOP MEDIUM*/
+  @media screen and (max-width: $desktop_medium){
+    max-width: 48.5% !important;
+  }
 }
\ No newline at end of file