Blocks: Fix box carousel layout on mobile devices (#13602)

GoogleForCreators · Mar 13, 2024 · 9128c13 · 9128c13
1 parent e146a96
commit 9128c13
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 16 deletions.
diff --git a/packages/stories-block/src/css/views/carousel.css b/packages/stories-block/src/css/views/carousel.css
@@ -1,5 +1,9 @@
 /* Web Stories: Carousel View */
 
+.carousel > .glider-track > .web-stories-list__story {
+  margin: 0 10px;
+}
+
 @media all and (min-width: 676px) {
   .web-stories-list.is-view-type-carousel .web-stories-list__story {
     margin: 0 5px;

diff --git a/packages/stories-carousel/src/index.js b/packages/stories-carousel/src/index.js
@@ -76,24 +76,12 @@ domReady(() => {
       // For Box Carousel we are showing single slide below tablets viewport.
       /* eslint-disable-next-line no-new -- we do not store the object as no further computation required with the built object. */
       new Glider(carouselWrapper, {
-        // Mobile-first defaults
-        slidesToShow: 1,
-        slidesToScroll: 1,
+        slidesToShow: 'auto',
+        slidesToScroll: 'auto',
+        itemWidth,
+        duration: 0.25,
         scrollLock: true,
         arrows: navArrows,
-        responsive: [
-          {
-            // screens greater than >= 775px
-            breakpoint: 775,
-            settings: {
-              // Set to `auto` and provide item width to adjust to viewport
-              slidesToShow: 'auto',
-              slidesToScroll: 'auto',
-              itemWidth,
-              duration: 0.25,
-            },
-          },
-        ],
       });
     }
   });