Fix- UI for mobile

campaign.html

@@ -51,7 +51,9 @@
         /* color: #ed1f24; */
         color: #EC221F;
       }
-    
+      .is-required{
+        color: #EC221F;
+      }
       .right-side-text {
         color: #2a468d;
         font-size: 18px;
@@ -68,9 +70,12 @@
       .composite {
         margin-top: 20px;
       }
-    
+    .side-banner{
+      margin-top: 50px;
+    }
       .banner {
-        margin-top: 50px;
+        width: 550px;
+         height: 350px
       }
     
       .input-button {
@@ -94,13 +99,13 @@
       }
     .popup-enter-text{
       font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 10px;
+      font-weight: 600;
+      margin-bottom: 10px;
     }
       dialog {
         width: 300px;
-    max-height: 400px;
-    padding: 30px;
+        max-height: 400px;
+        padding: 30px;
         border: 0;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
         border-radius: 15px;
@@ -177,7 +182,7 @@
         height: 35px;
         margin: 0 8px;
         text-align: center;
-        font-size: 1.5rem;
+        font-size: 14px;
         /* border: 2px solid #6665F1; */
         border-radius: 5px;
         /* background-color: rgba(42, 42, 42, 0.8); */
@@ -197,9 +202,9 @@
         margin: 0;
       }
     
-      .otp-input input[type=number] {
+      /* .otp-input input[type=number] {
         -moz-appearance: textfield;
-      }
+      } */
     
      button {
         background: linear-gradient(135deg, #6665F1, #A556F6);
@@ -301,6 +306,45 @@
       text-decoration: underline;
       font-weight: 600;
     }
+    @media screen and (max-width: 480px) {
+      .campaign-page{
+        margin: 10px;
+      }
+      .side-banner{
+        margin-top: 10px;
+      }
+      .css-1xzxck5 .lp-form-react__group {
+        width: 100% !important;
+        }
+      .head-text {
+        font-size: 14px;
+        padding-top: 10px;
+      }
+      .sub-text {
+        margin: 10px 0px;
+        font-size: 12px;
+        font-weight: 400;
+      }
+      .right-side-text{
+        font-size: 14px;
+      }
+      .n-logo{
+        height: 40px;
+      }
+      .d-block{
+        display: block;
+      }
+      .banner {
+       width: 100%;
+       height: 100%;
+      }
+      #dialogOne{
+        margin-top: 100% !important;
+      }
+      .css-1xzxck5 .lp-form-react__label {
+        font-size: 12px !important;
+    }
+    }
     </style> 
   <script>
     function SendWelcomeMail(email) {
@@ -336,17 +380,16 @@
     <div class="campaign-page">
       <!-- <div class="nivesh-logo"><img src="https://webassets.nivesh.com/Content/images/logo-transparent.png" alt="logo"/></div> -->
       <div class="nivesh-logo">
-        <img src="https://webassets.nivesh.com/Content/images/logo-transparent.png" alt="logo" height="70px" />
+        <img class="n-logo" src="https://webassets.nivesh.com/Content/images/logo-transparent.png" alt="logo" height="70px" />
       </div>
       <div class="head-text text-center">
         Boost Your <span class="text-danger"> Wealth Management Business</span> with
-        Our <br />
-        Easy-to-Use Digital Solutions
+        Our Easy-to-Use Digital Solutions
       </div>
-      <div class="row">
+      <div class="row d-block">
         <div class="col-6">
-          <div class="banner">
-            <img src="https://webassets.nivesh.com/Content/images/WealthBanner.jpg" alt="logo" width="550px" height="350px" />
+          <div class="side-banner">
+            <img class="banner" src="https://webassets.nivesh.com/Content/images/WealthBanner.jpg" alt="logo" />
           </div>
         </div>
         <div class="col-6">
@@ -1085,7 +1128,7 @@ input[type=number]::-webkit-outer-spin-button {
                           </div>
                           <div data-input-container="true" class="form-field font-scale-4">
                             <div class="lp-form-react__group js-form-group" id="Name-Block">
-                              <label for="Name" class="lp-form-react__label"><span>Name</span><input type="text" autocomplete="given-name"pattern="[A-Za-z]"
+                              <label for="Name" class="lp-form-react__label"><span>Name <span class="is-required">*</span></span><input type="text" autocomplete="given-name"pattern="[A-Za-z]"
                                   class="lp-form-react__input js-input-mapping" id="input-Name" data-url="" maxlength="500" placeholder="Name"
                                   name="input-Name" required="" value="" /></label><label for="Name"
                                 class="lp-form-react__error lp-form-react__error--required"><i class="fa fa-exclamation-circle"></i><span>Please
@@ -1099,7 +1142,7 @@ input[type=number]::-webkit-outer-spin-button {
                                 <div class="flex flex-form flex--12">
                                   <div class="flex__item--xs-12">
                                     <label for="cc5e02aa1d7740abc3a88f85ac0fb0c5-p65ZzSydG9jKNmj4eF8a4A" class="lp-form-react__label"><span>Phone
-                                        Number</span>
+                                        Number <span class="is-required">*</span></span>
                                         <input type="number" type="tel"onKeyPress="if(this.value.length==10) return false;" autocomplete="tel" class="lp-form-react__input js-input-mapping" id="input-PhoneNo"
                                         data-url="" placeholder="Phone Number" name="input-PhoneNo" required="" value="" /></label><label
                                       for="" class="lp-form-react__error lp-form-react__error--required"><i
@@ -1115,7 +1158,7 @@ input[type=number]::-webkit-outer-spin-button {
     
                           <div data-input-container="true" class="form-field font-scale-4">
                             <div class="lp-form-react__group js-form-group" id="Email-Block">
-                              <label for="email" class="lp-form-react__label"><span>Email</span><input type="text" autocomplete="given-name"
+                              <label for="email" class="lp-form-react__label"><span>Email <span class="is-required">*</span></span><input type="text" autocomplete="given-name"
                                   class="lp-form-react__input js-input-mapping" id="input-Email" data-url="" maxlength="500" placeholder="Email"
                                   name="input-Email" required="" value="" /></label><label for="Email"
                                 class="lp-form-react__error lp-form-react__error--required"><i class="fa fa-exclamation-circle"></i><span>Please
@@ -1132,7 +1175,7 @@ input[type=number]::-webkit-outer-spin-button {
     <div class="arn-class">
       <div data-input-container="true" class="form-field font-scale-4">
         <div class="lp-form-react__group js-form-group" id="ARN-Block">
-          <label for="email" class="lp-form-react__label"><span>ARN Number</span><input type="text" autocomplete="given-name"
+          <label for="email" class="lp-form-react__label"><span>ARN Number <span class="is-required">*</span></span><input type="text" autocomplete="given-name"
               class="lp-form-react__input js-input-mapping" id="input-ARN" data-url="" maxlength="500"
               placeholder="ARN Number" name="input-ARN" required="" value="" /></label><label for="ARN_No"
             class="lp-form-react__error lp-form-react__error--required"><i class="fa fa-exclamation-circle"></i><span>Please