fix(storefront): BCTHEME-362 fix cut off cart button on zooming 400

bigcommerce · Feb 16, 2021 · 321086f · 321086f
1 parent 3ded830
commit 321086f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed cut off on Cart button when Zooming up to 400%. [#1988](https://github.com/bigcommerce/cornerstone/pull/1988)
 - Make every product option group id unique. [#1979](https://github.com/bigcommerce/cornerstone/pull/1979)
 - Fixed required checkbox message displaying. [1963](https://github.com/bigcommerce/cornerstone/pull/1963)
 - Provided sufficient & informative text along with the color swatches [#1976](https://github.com/bigcommerce/cornerstone/pull/1976)

diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
@@ -608,6 +608,16 @@ $card-preview-zoom-bottom-offset:       6rem;
     }
 
     @include lazy-loaded-padding('productthumb_size');
+
+    &:after {
+        @include breakpoint("xxsmall") {
+            padding-bottom: 75%;
+        }
+
+        @include breakpoint("xsmall") {
+            padding-bottom: 100%;
+        }
+    }
 }
 
 .previewCartItem-content {
@@ -640,7 +650,14 @@ $card-preview-zoom-bottom-offset:       6rem;
     @include grid-row;
     border-top: container("border");
     display: block;
-    padding: spacing("single") spacing("half");
+
+    @include breakpoint("xxsmall") {
+        padding: spacing("half") spacing("quarter");
+    }
+
+    @include breakpoint("xsmall") {
+        padding: spacing("single") spacing("half");
+    }
 
     .button {
         margin: 0;