fix all sliders spacing at the end (safari bug)

Shopify · May 18, 2022 · 36d0637 · 36d0637
1 parent 703febb
commit 36d0637
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -1142,7 +1142,7 @@ summary::-webkit-details-marker {
   }
 
   .grid--peek.slider .grid__item:last-of-type {
-    margin-right: 1.5rem;
+    margin-right: calc(-1 * var(--grid-mobile-horizontal-spacing));
   }
 
   .grid--2-col-tablet-down .grid__item {
@@ -1178,10 +1178,6 @@ summary::-webkit-details-marker {
     margin-left: 1.5rem;
   }
 
-  .slider--tablet.grid--peek .grid__item:last-of-type {
-    margin-right: 1.5rem;
-  }
-
   .grid--2-col-tablet-down .grid__item {
     width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
   }

diff --git a/assets/component-slider.css b/assets/component-slider.css
@@ -47,6 +47,12 @@ slider-component.slider-component-full-width {
     margin-bottom: 1rem;
   }
 
+  .slider--mobile:after {
+    content: "";
+    width: 0px;
+    padding-left: 1.5rem;
+  }
+
   .slider.slider--mobile .slider__slide {
     margin-bottom: 0;
     padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
@@ -90,6 +96,16 @@ slider-component.slider-component-full-width {
     margin-bottom: 1rem;
   }
 
+  .slider--tablet:after {
+    content: "";
+    width: 0;
+    padding-left: 1.5rem;
+  }
+
+  .slider.slider--tablet .slider__slide:last-child {
+    margin-right: calc(-2 * var(--grid-mobile-horizontal-spacing));
+  }
+
   .slider.slider--tablet .slider__slide {
     margin-bottom: 0;
     padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
@@ -105,6 +121,12 @@ slider-component.slider-component-full-width {
   }
 }
 
+@media screen and (max-width: 749px) {
+  .slider.slider--tablet .slider__slide:last-child {
+    margin-right: calc(-1 * var(--grid-mobile-horizontal-spacing));
+  }
+}
+
 .slider--everywhere {
   position: relative;
   flex-wrap: inherit;
@@ -136,6 +158,12 @@ slider-component.slider-component-full-width {
     scroll-padding-left: var(--desktop-margin-left-first-item);
   }
 
+  .slider--desktop:after {
+    content: "";
+    width: 0px;
+    padding-left: 5rem;
+  }
+
   .slider.slider--desktop .slider__slide {
     margin-bottom: 0;
     padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
@@ -148,7 +176,7 @@ slider-component.slider-component-full-width {
   }
 
   .slider.slider--desktop .slider__slide:last-child {
-    margin-right: 5rem;
+    margin-right: calc(-1 * var(--grid-desktop-horizontal-spacing));
   }
 
   .slider-component-full-width .slider--desktop {
@@ -160,8 +188,8 @@ slider-component.slider-component-full-width {
     scroll-margin-left: 1.5rem;
   }
 
-  .slider-component-full-width .slider--desktop .slider__slide:last-child {
-    margin-right: 1.5rem;
+  .slider-component-full-width .slider--desktop:after {
+    padding-left: 1.5rem;
   }
 
   .slider--desktop.grid--5-col-desktop .grid__item {

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -531,16 +531,6 @@ a.product__text {
   display: block;
 }
 
-@media screen and (max-width: 749px) {
-  .product__media-item--variant:nth-last-child(2):is(.product__media-item--variant) {
-    padding-right: 1.5rem;
-  }
-
-  .product__media-item--variant:first-child {
-    display: flex;
-  }
-}
-
 @media screen and (min-width: 750px) and (max-width: 989px) {
   .product__media-list .product__media-item:first-child {
     padding-left: 0;