feat/ Responsividade em Listagem de Posts.

lostcode-dev · lostcode-dev · commit 44ea2c90f3d3 · 2022-11-29T21:33:32.000-03:00
diff --git a/src/pages/posts/styles.module.scss b/src/pages/posts/styles.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/variables';
+
 .container {
     max-width: 1120px;
     margin: 0 auto;
@@ -18,6 +20,14 @@
         height: 100%!important;
         display: block!important;
     }
+
+    @media (max-width: $breakpoint-md) {
+        height: 15rem;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+        width: 100%;
+    }
 }
 
 .notData {
@@ -54,6 +64,7 @@
     a {
         padding-right: 0rem;
         padding-left: 1rem;
+        
     }
 
     &:nth-child(even) {
@@ -68,6 +79,17 @@
             padding-left: 0rem;
             padding-right: 1rem;
         }
+
+        @media (max-width: $breakpoint-sm) {
+            flex-direction: column;
+            margin-top: 1rem;
+            width: 100%;
+            padding-left: 0px;
+
+            .imgContainer {
+                padding-left: 0rem;
+            }
+        }
     }
 
     &:nth-child(4n) {
@@ -88,6 +110,10 @@
             text-align: justify;
         }
     }
+
+    @media (max-width: $breakpoint-sm) {
+        flex-direction: column;
+    }
 }
 
 .posts {
@@ -138,6 +164,12 @@
         &:hover strong {
             color: var(--yellow-500);
         }
+
+        @media (max-width: $breakpoint-sm) {
+            margin-top: 1rem;
+            width: 100%;
+            padding-left: 0px;
+        }
     }
 }
 
