Add responsive styling for ApplePay button to adapt based on screen size

mollie · Oct 14, 2024 · 6be2bf2 · 6be2bf2
1 parent 970d798
commit 6be2bf2
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/resources/scss/mollie-applepaydirect.scss b/resources/scss/mollie-applepaydirect.scss
@@ -4,11 +4,34 @@
 .apple-pay-button {
   display: inline-block;
   width: 100%;
-  height: 41px;
   -webkit-appearance: -apple-pay-button;
   -apple-pay-button-type: checkout; /* also: check-out, book, or subscribe */
 }
 
+@media (max-width: 480px) {
+  .apple-pay-button {
+    height: 41px;
+    min-height: 40px;
+    max-height: 47px;
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  .apple-pay-button {
+    height: 48px;
+    min-height: 48px;
+    max-height: 55px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .apple-pay-button {
+    height: 56px;
+    min-height: 56px;
+    max-height: 64px;
+  }
+}
+
 .apple-pay-button-black {
   -apple-pay-button-style: black;
 }