DEX-21697 - Elements not fully visible in the box-carousel component

hlxsites · Feb 3, 2025 · 321ac23 · 321ac23
1 parent cdc5235
commit 321ac23
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css
@@ -31,11 +31,11 @@
     width: 100%;
     position: relative;
     display: flex;
-    overflow: hidden;
 }
 
 .box-carousel-container .carousel {
     display: flex;
+    align-items: stretch;
     transition: transform 150ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
 }
 
@@ -51,7 +51,7 @@
     display: flex;
     flex-direction: column;
     width: 220px;
-    min-height: 220px;
+    height: 100%;
     margin: 10px;
     box-sizing: border-box;
     padding: 20px;
@@ -65,7 +65,6 @@
 
 .box-carousel-container.testimonials .carousel-item {
     width: 300px;
-    height: 300px;
     display: flex;
     flex-direction: column;
     border: solid 1px #ddd;
@@ -172,7 +171,6 @@
 
     .box-carousel-container.testimonials .carousel-item {
         width: calc((100% - 25px) / 2);
-        min-height: 390px;
     }
 
     .box-carousel-container .carousel-item .subtitle {
@@ -191,7 +189,6 @@
 
     .box-carousel-container.testimonials .carousel-item {
         width: calc((100% - 25px) / 3);
-        min-height: 390px;
     }
 
     .box-carousel-container .carousel-item .title {

diff --git a/_src/blocks/box-carousel/box-carousel.js b/_src/blocks/box-carousel/box-carousel.js
@@ -5,6 +5,16 @@ export default async function decorate(block) {
   const [titleEl, ...slides] = [...block.children];
   let currentSlideIndex = 0;
 
+  const countItems = slides.length;
+  let countClass = `has-${countItems}-items`;
+  if (countItems > 3 && countItems < 7) {
+    countClass = 'has-3-7-items';
+  }
+  if (countItems > 7) {
+    countClass = 'has-more-items';
+  }
+  block.classList.add(countClass);
+
   const isTestimonials = block.closest('.section').classList.contains('testimonials');
 
   const carouselItemStyle = {

diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css
@@ -360,9 +360,12 @@ main .section.link-right a {
 }
 
 .trusted .box-carousel-container.testimonials .carousel-item {
+    width: calc(100% / 4.3);
+    padding: 2em;
+}
+
+.trusted .box-carousel-container.testimonials .has-3-7-items .carousel-item {
     width: calc(100% / 3 - 70px);
-    min-height: 470px;
-    padding: 50px 35px 45px;
 }
 
 .trusted .box-carousel-container.testimonials .carousel-item .subtitle-secondary {
@@ -874,6 +877,10 @@ main .section.link-right a {
         padding: 14px 0;
         margin-bottom: 0;
     }
+
+    .trusted .box-carousel-container .default-content-wrapper {
+        padding: 0 1em;
+    }
 }
 
 @media (max-width: 992px) {
@@ -914,6 +921,7 @@ main .section.link-right a {
 
     .trusted .box-carousel-container.testimonials .carousel-item {
         width: 300px;
-        padding: 1em 50px;
+        padding: 1em;
+        margin: 0 1em;
     }
 }