Merge pull request #497 from GSA/0824-carousel-mobile-adjustments

0824-carousel-mobile-adjustments
GSA · Aug 29, 2023 · 67c81e1 · 67c81e1
2 parents 7576a52 + e4c00fb
commit 67c81e1
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/_includes/hero.html b/_includes/hero.html
@@ -35,13 +35,13 @@
 
       <!-- Splide is initialized on this element so we can use our custom controls above -->
       <div class="splide flex-auto">
-        <div class="splide__track">
-          <div class="splide__list">
+        <div class="splide__track" style="height:auto;">
+          <div class="splide__list" style="height:auto;">
             {% for slide in site.data.gsacarousel %}
-            <div class="splide__slide splide_fix" role="group" aria-label="Slide about {{slide.heroHeading}}">
-                  <h2 class="hero-heading">{{ slide.heroHeading }}</h2>
-                  <p class="hero-text gsa-text-width">{{ slide.heroText }}</p>
-                  <a class="usa-button" href="{{ slide.actionLocation }}" target="{{ slide.actionTarget }}" rel="noopener noreferrer" title="{{ slide.actionButtonText }} {{slide.heroHeading}}" aria-label="{{ slide.actionButtonText }} {{slide.heroHeading}}">{{ slide.actionButtonText }} {{ slide.heroHeading }}</a>            
+            <div class="splide__slide splide_fix" style="width:auto;padding-right:50px;" role="group" aria-label="Slide about {{slide.heroHeading}}">
+                  <h2 class="hero-heading" style="width:auto;height:auto;" >{{ slide.heroHeading }}</h2>
+                  <p class="hero-text gsa-text-width" style="width:auto;" >{{ slide.heroText }}</p>
+                  <a class="usa-button" style="width: auto;"  href="{{ slide.actionLocation }}" target="{{ slide.actionTarget }}" rel="noopener noreferrer" title="{{ slide.actionButtonText }} {{slide.heroHeading}}" aria-label="{{ slide.actionButtonText }} {{slide.heroHeading}}">{{ slide.actionButtonText }} {{ slide.heroHeading }}</a>            
             </div>
             {% endfor %}
 

diff --git a/assets/css/index.scss b/assets/css/index.scss
@@ -93,13 +93,18 @@
 .usa-hero {
   //background-image: asset_url("new-header-graphic.png");
   background-image: url("{{site.baseurl}}/assets/images/new-background-30-fade.png");
-  //background-image: asset_url("hero-image2-blur.png");
   background-position: 50%;
   background-size: cover;
-  height: 380px;
+  // height: 380px;
+  height: auto;
   margin: 0px;
 }
 
+// To make both sides of a slide the same. see: _include/hero.html for element styles
+.splide__slide {
+  padding-left: 50px;
+}
+
 // Back to top button, displays in lower right corner after 500px of scroll.
 .gsa-back-to-top {
   display: none;
@@ -132,8 +137,8 @@
 
 // Responsive Hero for IDManagement
 .gsa-responsive-hero {
-  height: auto;
-  min-width: 300px; 
+  height:auto;
+  min-width: 220px; 
 }
 
 // Hero text length shortener-er 
@@ -142,13 +147,11 @@
   width: auto;
 }
 
-// .gsa-no-dec {
-//   text-decoration: none;
-// }
-
+// GSA Slide positions and height: also see: gsa-responsive-hero
 .gsa-slide {
   position: relative;
-  height: 380px;
+  // height: 380px;
+  height:auto;
   display: flex;
   align-items: center;
 }
@@ -188,7 +191,7 @@
 }
 // Fix problem with carousel's first slide not displaying at same width as proceeding slides and added tinting to cover busy images that are being selected as headers. 
 .gsa-carousel-fix {
-  width: 100%;
+  width: auto;
   padding: 20px;
  //background-color: rgba(#000000, 0.7);
 }
@@ -325,3 +328,24 @@
     display: block;
   }
 }
+
+@media (max-width: 640px) {
+  .paginate-link {
+    display: none;
+  }
+  .paginate-button {
+    display: block;
+  }
+  // Mobile Carousel adjustments
+  .hero-heading {
+    font-size: 2rem;
+  }
+
+  .hero-text {
+    font-size: 1rem;
+  }
+
+  .usa-button {
+    font-size: 0.9rem;
+  }
+}