CHEMH-260 | @jdwjdwjdw | Update full pill banner mobile styles (#80)

* Update full pill banner mobile styles * Spacing fixups
SU-SWS · Nov 21, 2023 · 8931b05 · 8931b05
1 parent a7c9c57
commit 8931b05
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/dist/css/chem_h_subtheme.css b/dist/css/chem_h_subtheme.css
diff --git a/src/scss/components/banner/_banner--fullpill.scss b/src/scss/components/banner/_banner--fullpill.scss
@@ -3,11 +3,9 @@
 $banner-circle--image-width: 200px;
 $banner-circle--sm-image-width: 150px;
 
-
 .chemh-wrapper--banner-fullpill {
-  margin: 0 auto;
-
-  @include grid-media-min('sm') {
+  @include grid-media-min('md') {
+    margin: 0 auto;
     max-width: calc(100vw - 200px);
   }
 
@@ -20,16 +18,21 @@ $banner-circle--sm-image-width: 150px;
     align-items: center;
     min-height: 400px;
 
+    @include grid-media-max('lg') {
+      flex-direction: column;
+    }
+
     @include grid-media-max('md') {
+      @include modular-spacing('padding', 3);
+
       background: $su-color-black url("../../assets/svg/fullpill-bg.svg") no-repeat 100% / 205%;
       flex-direction: column;
       background-size: cover;
-
-      @include modular-spacing('padding', 3);
     }
-
-    @include grid-media-max('lg') {
-      flex-direction: column;
+
+    @include grid-media-max('sm') {
+      border-radius: unset;
+      background: $su-color-black;
     }
 
     @include modular-spacing('padding-top', 3);
@@ -44,8 +47,7 @@ $banner-circle--sm-image-width: 150px;
       width: 275px;
 
       @include grid-media-max('sm') {
-        aspect-ratio: unset;
-        margin: 0 auto;
+        display: none;
       }
 
       img { // Image display has been set to media image style - Medium (220)