title: In iPhone, CSS not working in Email Template
body: <p>Here is my email template code. That is not working on the iPhone.In iPhone, the mail template is disturbing with the design. In android mobile looks fine. I had searched for lots of things about my problem. but, I could not find any solution. Your help will appreciate. can anyone help me? </p>
  
  <p>Html</p>
  
  <pre><code>    &lt;body style="margin: 0;padding: 0;position: relative;min-height: 100vh;background-color: #e7e4ff;"&gt;
      &lt;div class="mail_temp_section"&gt;
          &lt;div class="mail_temp_card"&gt;
              &lt;h2&gt;Welcome to the team!&lt;/h2&gt;
              &lt;div class="input_field"&gt;
                  &lt;label style="padding: 1.5625VW;"&gt;License
                      &lt;span&gt;8999-879878-45131-3213&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;p&gt;Activate your account in our &lt;a href="#" style="border-bottom: 0.104vw solid #836dfa;"&gt;dashboard&lt;/a&gt;&lt;/p&gt;
              &lt;a href="#" class="twitter_link"&gt;&lt;img src="https://i.ibb.co/CnNLZmj/twitter.png" alt="twitter" style="vertical-align: sub;
                  margin-right: 0.2vw; height: 1.25VW; width: 1.25VW;"&gt; Feel free to reach out via Facebook&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body * {
      box-sizing: border-box;
      font-family: 'Arial Black';
  }
  .mail_temp_section {
      -ms-flex-align: center;
      display: flex;
      width: 100%;
      height: 100vh;
  }
  
  .mail_temp_card {
      background-image: url(https://i.ibb.co/YZgs2vS/mail-bg.png);
      display: table;
      margin: auto;
      width: 45.6vw;
      padding: 6vw;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 1.6vw;
      text-align: center;
      background-position: bottom center;
  }
  
  .mail_temp_card h2 {
      color: #775cff;
      font-size: 2vw;
      padding-bottom: 2vw;
      margin-top: 50px;
  }
  
  .input_field {
      background-color: #e3e3f2;
      padding: 1.4vw;
      border-radius: 1.6vw;
      -webkit-box-shadow: 0px -10px 30px -5px rgba(204, 204, 236, 0.65);
      -moz-box-shadow: 0px -10px 30px -5px rgba(204, 204, 236, 0.65);
      box-shadow: 0px -10px 30px -5px rgba(204, 204, 236, 0.65);
      display: table;
      margin: auto;
  }
  
  .input_field label {
      font-size: 1.1vw;
      display: block;
      width: 100%;
      text-align: left;
      color: #2e3246;
      padding: 30px;
  }
  
  .input_field span {
      display: block;
      background-color: #fff;
      padding: 0.3vw 1vw;
      color: #2e3246;
      font-size: 1.2vw;
      margin-top: 0.5vw;
      cursor: text;
  }
  
  .mail_temp_card p {
      font-size: 0.7vw;
      padding-top: 4.5vw;
      color: #2e3246;
      font-family: 'Lato';
  }
  
  .mail_temp_card p a {
      color: #836dfa;
      border-bottom: 0.104vw solid #836dfa;
  }
  
  .mail_temp_card&gt;a.twitter_link {
      color: #2e3246;
      font-size: 0.7vw;
      margin-top: 0.7vw;
      font-family: 'Lato';
  }
  
  a.twitter_link {
      margin-bottom: 50px;
  }
  
  a.twitter_link img {
      width: 24px;
      height: 24px;
  }
  </code></pre>
  
  <p>Thank you in advance...</p>