Added media query below 640 for mobile

GSA · Aug 25, 2023 · e4c00fb · e4c00fb
1 parent e153bb0
commit e4c00fb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/_includes/hero.html b/_includes/hero.html
@@ -39,7 +39,7 @@
           <div class="splide__list" style="height:auto;">
             {% for slide in site.data.gsacarousel %}
             <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;overflow-wrap: break-word;" >{{ slide.heroHeading }}</h2>
+                  <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>

diff --git a/assets/css/index.scss b/assets/css/index.scss
@@ -328,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;
+  }
+}