Remove white space mobile view for product page (Shopify#655)

Gravytrain-UK · Sep 24, 2021 · f13aaec · f13aaec
1 parent 4221471
commit f13aaec
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/assets/component-product-model.css b/assets/component-product-model.css
@@ -1,8 +1,9 @@
-.button.product__xr-button {
+.product__xr-button {
   background: rgba(var(--color-foreground), 0.08);
   color: rgb(var(--color-foreground));
   margin: 1rem auto;
   box-shadow: none;
+  display: flex;
 }
 
 .button.product__xr-button:hover {
@@ -14,7 +15,7 @@
 }
 
 @media screen and (max-width: 749px) {
-  slider-component .product__xr-button:not([data-shopify-xr-hidden]) {
+  slider-component .product__xr-button {
     display: none;
   }
 

diff --git a/assets/product-model.js b/assets/product-model.js
@@ -54,5 +54,8 @@ window.ProductModel = {
 };
 
 window.addEventListener('DOMContentLoaded', () => { 
+  if (Shopify.designMode) {
+    document.querySelectorAll("[data-shopify-xr-hidden]").forEach(element => element.classList.add('hidden'));
+  }
   if (window.ProductModel) window.ProductModel.loadShopifyXR();
 });