fix: responsivity in cards

peapescarte · Sep 21, 2024 · 70cf474 · 70cf474
1 parent fa4fe40
commit 70cf474
Show file tree

Hide file tree

Showing 4 changed files with 439 additions and 68 deletions.
diff --git a/assets/css/boletins.scss b/assets/css/boletins.scss
@@ -1,32 +1,42 @@
 .boletim-wrapper {
-  .links-item {
-    width: 15.5rem;
+  .card-links{
+    border-radius: none;
+
+    .card-item {
+      width: 16.5rem;
+    }
   }
 }
 
 @media (min-width: 530px) and (max-width: 770px){
 
   .boletim-wrapper {
-    .links-item {
-      @apply flex flex-col justify-start items-start m-8;
-      width: 52%;
-      height: 16rem;
+    .card-links{
       border-radius: 8px;
-      box-sizing: border-box;
-      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+      .card-item {
+        @apply flex flex-col justify-start items-start m-8;
+        width: 50%;
+        height: 16rem;
+        border-radius: 8px;
+        box-sizing: border-box;
+        background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+      }
     }
   }
 }
 @media (min-width: 350px) and (max-width: 529px){
 
   .boletim-wrapper {
-    .links-item {
-      @apply flex flex-col justify-start items-start m-8;
-      width: 60%;
-      height: 13rem;
+    .card-links{
       border-radius: 8px;
-      box-sizing: border-box;
-      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+      .card-item {
+        @apply flex flex-col justify-start items-start m-8;
+        width: 70%;
+        height: 15rem;
+        border-radius: 8px;
+        box-sizing: border-box;
+        background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+      }
     }
   }
 }
diff --git a/assets/css/cards.scss b/assets/css/cards.scss
@@ -47,3 +47,31 @@
     }
   }
 }
+
+@media (max-width: 768px) and (min-width: 577px){
+.card-links{
+  .card-item{
+    width: 70%;
+    height: 16rem;
+
+    img{
+      border-radius: 8px;
+    }
+  }
+}
+
+}
+
+@media (min-width: 350px) and (max-width: 576px){
+  .card-links{
+    .card-item{
+      width: 80%;
+      height: 14rem;
+
+      img{
+        border-radius: 8px;
+      }
+    }
+  }
+
+}