more

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>
                 ) : (

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;
+  }
+}

src/styles/signup.scss

@@ -442,4 +442,8 @@
     width: 180px !important;
     margin-top: 18px;
   }
+
+  .paymodal-summary-left-bonus {
+    margin-top: 3px;
+  }
 }