Merge pull request #1371 from pedelman/MERC-4196-slick-slider-iframe

MERC-4196: Fixes issue with Slick slider for mobile safari
bigcommerce · Oct 15, 2018 · 596942f · 596942f
2 parents 84f0898 + b491d0b
commit 596942f
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,4 @@ assets/js/bundle.js
 assets/dist
 *.js.map
 *.zip
+.idea/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Draft
 - Product review modal error message is now accurate. [#1370](https://github.com/bigcommerce/cornerstone/pull/1370)
+- Fixes issue with Slick slider for mobile safari in iframe [#1371](https://github.com/bigcommerce/cornerstone/pull/1371)
 
 ## 2.5.1 (2018-10-10)
 - Fix broken breadcrumb schema markup [#1362](https://github.com/bigcommerce/cornerstone/pull/1362)

diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
@@ -18,6 +18,8 @@
 // -----------------------------------------------------------------------------
 
 .heroCarousel {
+    width: 1px;
+    min-width: 100%;
     margin-bottom: (spacing("double") + spacing("single"));
     margin-top: -(spacing("single")); // 3
 

diff --git a/assets/scss/components/stencil/productCarousel/_productCarousel.scss b/assets/scss/components/stencil/productCarousel/_productCarousel.scss
@@ -9,6 +9,8 @@
 // -----------------------------------------------------------------------------
 
 .productCarousel { // 1
+    width: 1px;
+    min-width: 100%;
     @include grid-row(
         $behavior: nest
     );

diff --git a/templates/components/products/carousel.html b/templates/components/products/carousel.html
@@ -3,31 +3,8 @@
         "dots": true,
         "infinite": false,
         "mobileFirst": true,
-        "slidesToShow": 2,
-        "slidesToScroll": 2,
-        "responsive": [
-            {
-                "breakpoint": 1260,
-                "settings": {
-                    "slidesToScroll": 3,
-                    "slidesToShow": {{ columns }}
-                }
-            },
-            {
-                "breakpoint": 800,
-                "settings": {
-                    "slidesToScroll": 3,
-                    "slidesToShow": 5
-                }
-            },
-            {
-                "breakpoint": 550,
-                "settings": {
-                    "slidesToScroll": 3,
-                    "slidesToShow": 3
-                }
-            }
-        ]
+        "slidesToShow": {{ columns }},
+        "slidesToScroll": 3
     }'
 >
     {{#each products}}