fix: let space wrap and height grow for cards in banner (#947)

* let space wrap and height grow * minimum width added, aligned bottom
AstarNetwork · Oct 3, 2023 · 171f247 · 171f247
1 parent d471592
commit 171f247
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/components/dapp-staking/my-staking/components/banners/Algem.vue b/src/components/dapp-staking/my-staking/components/banners/Algem.vue
@@ -41,7 +41,7 @@ export default defineComponent({
   cursor: pointer;
   background: #d9d9d9;
   background-size: cover;
-  height: 127px;
+  min-height: 127px;
   border-radius: 5px;
   padding: 24px 46px;
   background-image: url('src/assets/img/banner/banner-algem.png');

diff --git a/src/components/dapp-staking/my-staking/components/banners/DeveloperIncentive.vue b/src/components/dapp-staking/my-staking/components/banners/DeveloperIncentive.vue
@@ -74,7 +74,7 @@ export default defineComponent({
   justify-content: center;
   flex-basis: 50%;
   background: #d9d9d9;
-  height: 127px;
+  min-height: 127px;
   border-radius: 5px;
   padding: 24px;
   background-image: url('src/assets/img/banner/banner-01-light.png');

diff --git a/src/components/dapp-staking/my-staking/styles/dynamic-ads-area.scss b/src/components/dapp-staking/my-staking/styles/dynamic-ads-area.scss
@@ -11,7 +11,7 @@
 }
 .wrapper-item {
   flex: 1 1 0px;
-  height: 211px;
+  min-height: 211px;
 }
 
 .news-area {
@@ -46,7 +46,8 @@
   }
   .card {
     flex-basis: 47%;
-    height: 100%;
+    min-height: 127px;
+    min-width: 170px !important; // Ensures that min-width is at least 170px
     cursor: pointer;
     background: rgba(196, 196, 196, 0.1);
     backdrop-filter: blur(50px);
@@ -77,7 +78,6 @@
       font-weight: 600;
       font-size: 14px;
       line-height: 18px;
-      white-space: nowrap;
       color: #fff;
     }
     .txt--title {
@@ -96,9 +96,13 @@
     }
 
     @media (min-width: $md) {
-      min-width: 191px;
+      min-width: max(170px, 191px);
       flex-basis: 48%;
     }
+
+    @media (min-width: $lg) {
+      min-width: 170px; // Adjust this value as necessary
+    }
   }
 
   .card:first-child {
@@ -120,11 +124,11 @@
 .wrapper--shiden {
   .card:first-child {
     background: linear-gradient(
-      129.32deg, 
-      #170d29 -4.43%, 
-      #481e94 31.93%, 
-      #6d2cae 74.44%, 
+      129.32deg,
+      #170d29 -4.43%,
+      #481e94 31.93%,
+      #6d2cae 74.44%,
       #0a010d 133.31%
     );
   }
-}
+}