title: follow focus on form textfield when it clicked to fill in web mobile ver
body: <p>i'm a new learner in web development. so , sorry if this question make u fill confused for what i mean.</p>
  <p>i found a problem when i saw my web page in mobile version on form textarea.
  everytime i clicked the field area to fill it and click the button beside.
  the keyboard always closes the textfield area, and makes <strong>viewport behind it zoomed out</strong>.</p>
  <p>i set the position form to relative by the way.</p>
  <p>this i attach the view before and after i click it.</p>
  <p><a href="https://i.stack.imgur.com/9LKGS.png" rel="nofollow noreferrer">pic before</a><br />
  <a href="https://i.stack.imgur.com/n3TOi.png" rel="nofollow noreferrer">pic after</a></p>
  <p>and this the code for the html and css i use,
  (let me know if this need to be solve by jquery and javascript ) :</p>
  <pre><code>        &lt;div class=&quot;newslatter&quot;&gt;
              &lt;form&gt;
                  &lt;input type=&quot;email&quot; name=&quot;email&quot; id=&quot;mail&quot; placeholder=&quot;Enter Your Email&quot; autofocus required&gt;
                  &lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Let's Start !&quot;&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  </code></pre>
  <p>for the css :</p>
  <pre><code>.newslatter form {
    width: 380px;
    max-width: 100%;
    position: relative;
  }
  .newslatter form input:first-child {
    display: inline-block;
    width: 100%;
    padding: 14px 130px 14px 15px;
    border: 3px solid var(--main-color);
    outline: none;
    border-radius: 30px;
  }
  .newslatter form input:last-child {
    position: absolute;
    display: inline-block;
    outline: none;
    border: none;
    background-color: var(--main-color);
    color: white;
    border-radius: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 5px #000, 0 0 15px #858585;
    top: 7px;
    right: 6px;
    cursor: pointer;
    transform: 0.5s;
  }
  .newslatter form input:last-child:hover {
    transform: scale(0.95);
  }
  </code></pre>