update banner responsive style

CoorpAcademy · Nov 6, 2024 · fb4458f · fb4458f
1 parent f09a8e3
commit fb4458f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/packages/@coorpacademy-components/src/molecule/go1-base-banner/index.js b/packages/@coorpacademy-components/src/molecule/go1-base-banner/index.js
@@ -36,6 +36,7 @@ const Go1BaseBanner = props => {
           />
         </div>
       </div>
+      <div className={style.imagePlaceholder} />
       <img className={style.image} src={image} />
     </div>
   );

diff --git a/packages/@coorpacademy-components/src/molecule/go1-base-banner/style.css b/packages/@coorpacademy-components/src/molecule/go1-base-banner/style.css
@@ -13,12 +13,12 @@
   background: linear-gradient(312deg, rgba(221, 209, 255, 0.80) 11.39%, rgba(250, 250, 250, 0.00) 54.19%), linear-gradient(11deg, #EBF2FF 11.7%, rgba(250, 250, 250, 0.00) 106.37%), var(--background-background_primary, #FAFAFA);;
   border-radius: 16px;
   width: 100%;
-  height: 246px;
-  overflow: hidden;
+  min-height: 246px;
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   margin-top: 30px;
+  position: relative;
+  overflow: hidden;
 }
 
 .buttonWrapper {
@@ -48,20 +48,24 @@
   line-height: 20px;
   margin-bottom: 22px;
 }
+
+.imagePlaceholder {
+  height: 246px;
+  width: 471px;
+  flex-shrink: 0;
+}
+
 .image {
-  position: relative;
-  width: 427px;
-  height: auto;
-  top: 32px;
+  position: absolute;
+  width: auto;
+  height: 266px;
   right: 32px;
+  top: 32px;
 }
-@media tablet {
-  .image {
-    display: none;
-  }
-}
-@media mobile {
-  .image {
+
+@media (max-width: 1040px) {
+  .image,
+  .imagePlaceholder {
     display: none;
   }
 }