EDERCMS-0 fix cards for mobile

techdivision · Oct 21, 2024 · 7e749b2 · 7e749b2
1 parent 527fa2a
commit 7e749b2
Showing 1 changed file with 22 additions and 8 deletions.
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -124,20 +124,17 @@
 .cards.third-width > ul,
 .cards.half-width > ul {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
+  grid-template-columns: 1fr;
   grid-gap: var(--spacing-simple);
 }
 
-/* styling half-width cards with brand logo */
+  /* styling half-width cards with brand logo */
 .cards.half-width .cards-card-image + .cards-card-image {
   max-width: 80px;
-  position: absolute;
-  right: var(--spacing-simple);
+  position: relative;
+  padding-right: var(--spacing-simple);
   margin-top: var(--spacing-simple);
-}
-
-.cards.half-width .cards-card-image + .cards-card-image + .cards-card-body {
-  padding-right: 110px;
+  margin-left: auto;
 }
 
 @media (width >= 600px) {
@@ -150,7 +147,24 @@
     padding-bottom: 130px;
   }
 
+  .cards.third-width > ul,
   .cards.half-width > ul {
     grid-template-columns: 1fr 1fr;
   }
 }
+
+@media (width >= 900px) {
+  .cards.third-width > ul {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .cards.half-width .cards-card-image + .cards-card-image + .cards-card-body {
+    padding-right: 110px;
+  }
+
+  .cards.half-width .cards-card-image + .cards-card-image {
+    position: absolute;
+    right: var(--spacing-simple);
+    padding-right: 0;
+  }
+}