Cleanup product media grid spacing (#1444)

* Cleanup product media grid * Adjust grid selectors * Hopefully fix arrow alignment * Fix non-stacked item widths
Shopify · Mar 8, 2022 · 95c5e93 · 95c5e93
1 parent a233886
commit 95c5e93
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -177,8 +177,8 @@
   --shadow-opacity: var(--text-boxes-shadow-opacity);
 }
 
-.product__media-gallery .slider,
-.product__media-item {
+.contains-media,
+.global-media-settings {
   --border-radius: var(--media-radius);
   --border-width: var(--media-border-width);
   --border-opacity: var(--media-border-opacity);

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -500,10 +500,6 @@ a.product__text {
     padding-right: var(--media-shadow-horizontal-offset);
   }
 
-  .product__media-item:first-child {
-    width: 100%;
-  }
-
   .product--thumbnail .product__media-item:not(.is-active),
   .product--thumbnail_slider .product__media-item:not(.is-active) {
     display: none;
@@ -542,7 +538,6 @@ a.product__text {
   }
 
   .product__media-list .product__media-item {
-    padding: 0 0 0.5rem;
     width: 100%;
   }
 }
@@ -590,6 +585,16 @@ a.product__text {
 }
 
 @media screen and (min-width: 990px) {
+  .product--stacked .product__media-item {
+    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
+  }
+
+  .product__media-list .product__media-item:first-child,
+  .product__media-list .product__media-item--full {
+    width: 100%;
+    max-width: 100%;
+  }
+
   .product__modal-opener .product__media-icon {
     opacity: 0;
   }
@@ -967,7 +972,6 @@ a.product__text {
 
   .thumbnail-list {
     display: grid;
-    margin-left: -1rem;
     grid-template-columns: repeat(4, 1fr);
   }
 }
@@ -978,7 +982,6 @@ a.product__text {
 
 @media screen and (min-width: 990px) {
   .thumbnail-list {
-    margin-left: 0;
     grid-template-columns: repeat(4, 1fr);
   }
 
@@ -1040,7 +1043,7 @@ a.product__text {
   }
 
   .product--thumbnail_slider .slider-mobile-gutter .slider-button {
-    display: block;
+    display: flex;
   }
 }
 

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -40,7 +40,7 @@
           <a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">
             {{ "accessibility.skip_to_product_info" | t }}
           </a>
-          <ul id="Slider-Gallery-{{ section.id }}" class="product__media-list grid grid--peek list-unstyled slider slider--mobile" role="list">
+          <ul id="Slider-Gallery-{{ section.id }}" class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile" role="list">
             {%- liquid
               assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
               assign media_count = product.media.size