Fix the product page slider on mobile

assets/product.css

@@ -102,6 +102,16 @@
     margin: 0;
   }
 }
+@media (max-width: 768px) {
+  .yc-single-product .product-images .product-images-container .splide__slide {
+    width: 100% !important;
+  }
+}
+@media (max-width: 768px) {
+  .yc-single-product .product-images .product-images-container .splide__list {
+    flex-direction: column;
+  }
+}
 .yc-single-product .product-images .product-images-container .splide__arrow {
   width: 16px;
   height: 16px;

snippets/single-product.liquid

@@ -111,7 +111,7 @@ const desktopSlider = new Splide(`#yc_slider_{{ uniqID }}.yc-slider__desktop`, {
 });
 
 desktopSlider.on('mounted', () => {
-  if (products >= 3 && window.innerWidth < 1024 || products > 4) {
+  if (products >= 3 && window.innerWidth < 1024 || products >= 4) {
     document.querySelector('.yc-slider__desktop').style.padding = '0 40px';
   }
 

styles/product.scss

@@ -102,6 +102,16 @@
           height: 100% !important;
           margin: 0;
         }
+
+        @include max-screen('md') {
+          width: 100% !important;
+        }
+      }
+
+      .splide__list {
+        @include max-screen('md') {
+          flex-direction: column;
+        }
       }
 
       .splide__arrow {