title: Text sizes change when soft keyboard pops up
body: <p>I have designed a webpage that looks like this on mobile:</p>
  
  <p><a href="https://i.stack.imgur.com/NU9QKm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NU9QKm.jpg" alt="Mobile webpage"></a></p>
  
  <p>But when I click on the text input and the keyboard pops up, the text sizes change completely:</p>
  
  <p><a href="https://i.stack.imgur.com/XXb5km.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XXb5km.jpg" alt="Mobile webpage 2"></a></p>
  
  <p>My css code is as follows:</p>
  
  <pre><code>@media screen and (orientation: portrait) {
      #div_pword_content {
          width: 100%;
      }
      #div_pword_content h1 {
          font-size: 40px;
      }
      #edt_password {
          width: 300px;
          height: 40px;
          font-size: 30px;
      }
  }
  
  #div_pword_content {
      text-align: center;
      margin: auto;
  }
  </code></pre>
  
  <p>What is causing this problem and how can I fix it?</p>