fix(payment): INT-2902 modified style in order to avoid overlapping f…

…ields with small devices on stripeV3
bigcommerce · Aug 5, 2020 · 83f26f4 · 83f26f4
1 parent d1d9ead
commit 83f26f4
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/scss/components/checkout/widget/_widget.scss b/src/scss/components/checkout/widget/_widget.scss
@@ -60,6 +60,18 @@
     margin-bottom: remCalc(20px);
     margin-top: remCalc(20px);
     padding: 1rem;
+
+    @media screen and (max-width: 375px) {
+        margin: remCalc(20px) -2rem remCalc(20px) -2rem;
+        padding: 1rem;
+        width: 20rem;
+    }
+
+    @media screen and (max-width: 320px) {
+        margin: remCalc(20px) -2rem remCalc(20px) -3rem;
+        padding: 1rem;
+        width: 19rem;
+    }
 }
 
 .StripeElement--focus {