set fixed width on adaptive cards so they display the same length

kgwebsites · Jan 25, 2022 · 308d3d4 · 308d3d4
1 parent 86d475d
commit 308d3d4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/components/pages/build/cards-view/card.module.scss b/src/components/pages/build/cards-view/card.module.scss
@@ -3,9 +3,23 @@
     display: flex;
     align-items: center;
     margin: 0 0 1rem 0;
-    border: 1px lightgrey solid;
-
+    min-width: 800px;
+    overflow: hidden;
+    border-radius: 10px;
+    box-shadow: 0 0 1px rgba(40, 41, 61, 0.08), 0 0.5px 2px rgba(96, 97, 112, 0.16);
+    &:hover {
+        box-shadow: 0 1px 6px -3px rgba(0, 0, 0, 0.5);
+        box-shadow: 2px 0 -3px rgba(40, 41, 61, 0.08), 0 2px 2px rgba(96, 97, 112, 0.16);
+    }
     &-message {
         padding: 1rem;
     }
 }
+
+@media only screen and (max-width: 992px) {
+    .card {
+        min-width: 100%;
+        max-width: 100%;
+        overflow: auto;
+    }
+}
diff --git a/src/components/pages/build/cards-view/cards-view.module.scss b/src/components/pages/build/cards-view/cards-view.module.scss
@@ -3,6 +3,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 40px;
 }
 
 .message {