fix(storefront): BCTHEME-477 Add to cart button and Wishlist should b…

…e on one line on desktop (#2050)
bigcommerce · Jun 3, 2021 · 267e33c · 267e33c
1 parent 95e25cc
commit 267e33c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Add to cart button and Wishlist should be on one line on desktop. [#2050](https://github.com/bigcommerce/cornerstone/pull/2050)
 - Logo on AMP Product details page (PDP) doesn't fit header. [#2054](https://github.com/bigcommerce/cornerstone/pull/2054)
 - Translation Gap: Compare page fields (Description, Rating and Availability). [#2059](https://github.com/bigcommerce/cornerstone/pull/2059)
 - Translation Gap: Compare products error message. [#2061](https://github.com/bigcommerce/cornerstone/pull/2061)

diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -291,6 +291,10 @@
 
     .form {
         display: inline;
+
+        .add-to-cart-wrapper {
+            display: inline;
+        }
     }
 
     input[type="file"] {
@@ -337,7 +341,6 @@
         }
 
         @include breakpoint("medium") {
-            float: none;
             padding: 0;
             width: auto;
         }
@@ -351,11 +354,18 @@
         .button {
             width: 100%;
 
+            @include breakpoint("medium") {
+                width: auto;
+            }
+
             @include breakpoint("large") {
                 margin-right: spacing("half");
-                width: auto;
             }
         }
+
+        .button--primary {
+            margin-right: spacing("half");
+        }
     }
 }
 

diff --git a/templates/components/products/add-to-cart.html b/templates/components/products/add-to-cart.html
@@ -1,4 +1,4 @@
-<div id="add-to-cart-wrapper" {{#unless product.can_purchase}}style="display: none"{{/unless}}>
+<div id="add-to-cart-wrapper" class="add-to-cart-wrapper" {{#unless product.can_purchase}}style="display: none"{{/unless}}>
     {{#if theme_settings.show_product_quantity_box}}
         {{inject 'productQuantityErrorMessage'  (lang 'products.quantity_error_message')}}
         <div class="form-field form-field--increments">