From a1643efd58210380b30fd4c1197667fce68b1882 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 20:18:17 -0600
Subject: [PATCH] more

---
 src/Components/Modals/PaymentModal.js |  4 +-
 src/styles/modals.scss                | 57 +++++++++++++++++++++++++++
 src/styles/signup.scss                |  4 ++
 3 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index 61550b5..9c84c19 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -96,7 +96,7 @@ const PaymentModal = ({
               <div className="payment-modal-text-wrapper">
                 <div className="paymodal-summary-right"></div>
                 <div className="paymodal-summary-left-bonus">
-                  Includes 10% discount for convenient annual billing
+                  Includes 15% discount for convenient annual billing
                 </div>
               </div>
             ) : (
@@ -108,7 +108,7 @@ const PaymentModal = ({
         <Form className="payment-form">
           {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
             (names, j) => (
-              <Row key={`row${j}-modal`}>
+              <Row key={`row${j}-modal`} className="payment-order-row">
                 {j === 2 ? (
                   <div className="exp-date-hearder">Card Expiration Date</div>
                 ) : (
diff --git a/src/styles/modals.scss b/src/styles/modals.scss
index cbcc0ef..2af2d11 100644
--- a/src/styles/modals.scss
+++ b/src/styles/modals.scss
@@ -129,3 +129,60 @@
   margin-left: 13px;
   padding-left: 7px;
 }
+
+@media only screen and (max-width: 820px) {
+  .modal-body {
+    width: 580px !important;
+  }
+
+  .payment-order-row {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .order-summary-container {
+    width: 420px;
+    flex-direction: unset;
+    justify-content: center;
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 12px;
+  }
+
+  .payment-order-row {
+    width: 420px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .payment-form {
+    width: 620px !important;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .modal-body {
+    width: 380px;
+  }
+
+  .order-summary-container {
+    flex-direction: column;
+  }
+
+  .order-summary-container {
+    justify-content: center;
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 12px;
+  }
+  .payment-form {
+    width: 320px !important;
+  }
+  .payment-order-row {
+    display: flex;
+    flex-direction: column;
+  }
+  .short-column {
+    margin: 4px 0px;
+  }
+}
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 93f335c..7d15e97 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -442,4 +442,8 @@
     width: 180px !important;
     margin-top: 18px;
   }
+
+  .paymodal-summary-left-bonus {
+    margin-top: 3px;
+  }
 }