title: Text overlapping font awesome icon- happened only in mobile/tablet devices
body: <p>My website looks great on desktop. However, one of my form element - "Message" text is overlapping on my font awesome pencil icon when opening the form on mobile/tablet device.</p>
  
  <p>Oddly, this error only showing up on tablet/mobile devices. It doesn't showing up in my responsive tools when I'm making sure everything looks fine on those devices.</p>
  
  <p>I'm using Google Chrome responsive tool to test on these devices. I also tried to use Viewport Resizer at Desktop to test them, but neither of them pop up this issue on those sized screens.</p>
  
  <p>I have added a photo to prove this and below is my code: </p>
  
  <p><a href="https://i.stack.imgur.com/BiPiQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BiPiQ.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Contact&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
   &lt;link rel="stylesheet" type="text/css" href="contact.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;!--Homepage link--&gt;   
    &lt;nav class="navbar navbar-expand-sm navbar-dark bg-dark"&gt;
      &lt;a class="navbar-brand" href="index.html"&gt;&lt;img class="avatar" src="images/Originals/avatar.jpg" alt&gt;Mu&amp;ntilde;oz Designs&lt;/a&gt;
  
      &lt;!--Toggle Button--&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;&lt;/button&gt;
  
        &lt;!--Navbar links--&gt;
        &lt;div class="collapse navbar-collapse text-center" id="navbarResponsive"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
            &lt;li class="nav-item"&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link"
                href="about.html"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link"
                href="portfolio.html"&gt;Portfolio&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;!--Social Media Icons--&gt;
                    &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"&gt;&lt;i class="fa fa-instagram" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"&gt;&lt;i class="fa fa-linkedin-square" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  
                  &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"&gt;&lt;i class="fa fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  
                    &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"&gt;&lt;i class="fa fa-deviantart" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  
                      &lt;li class="nav-item"&gt;
                        &lt;a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"&gt;&lt;i class="fa fa-paint-brush" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  
                        &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="contact.php" title="Email"&gt;
                            &lt;i class="fa fa-envelope-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/nav&gt;
                    &lt;!--Intro of Contact--&gt;
  
                    &lt;div class="intro"&gt;
                      &lt;h1&gt;Contact&lt;/h1&gt;
                      &lt;h4&gt;If you would like to work with me, send me a message!&lt;/h4&gt;
                    &lt;/div&gt;
  
                    &lt;!--Contact Form--&gt;
  
                    &lt;div class="container"&gt;
  
                      &lt;?php if ($msg !=''): ?&gt;
  
                        &lt;div class="alert &lt;?php echo $msgClass; ?&gt;"&gt;&lt;?php echo $msg; ?&gt;&lt;/div&gt;
  
                      &lt;?php endif; ?&gt;
  
                      &lt;div class="row"&gt;
                        &lt;div class="col-sm-12 mx-offset-auto"&gt;
                          &lt;div class="well well-sm"&gt;
                            &lt;form class="form-horizontal" method="post"&gt;
  
                              &lt;fieldset&gt;
  
                                &lt;div class="form-group"&gt;
                                  &lt;div class="col-md-8 mx-auto"&gt;
                                    &lt;div class="input-wrapper"&gt;
                                      &lt;input id="fname" name="name" placeholder="Name" type="text" class="form-control" value="&lt;?php echo isset($_POST['name']) ? $name : ''; ?&gt;"&gt;
                                      &lt;label for="fname" class="fa fa-user input-icon bigicon"&gt;&lt;/label&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
  
                                &lt;div class="form-group"&gt;
                                  &lt;div class=" col-md-8 mx-auto"&gt;
                                    &lt;div class="input-wrapper"&gt;
                                      &lt;input id="email" name="email" type="text" placeholder="Email" class="form-control" value="&lt;?php echo isset($_POST['email']) ? $email : ''; ?&gt;"&gt;
                                      &lt;label for="email" class="fa fa-envelope-o input-icon bigicon"&gt;&lt;/label&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
  
                                &lt;div class="form-group"&gt;
                                  &lt;div class=" col-md-8 mx-auto"&gt;
                                    &lt;div class="input-wrapper"&gt;
                                      &lt;textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"&gt;&lt;?php echo isset($_POST['message']) ? $message : ''; ?&gt;&lt;/textarea&gt;
                                      &lt;label for="message" class="fa fa-pencil input-icon bigicon"&gt;&lt;/label&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
  
                                &lt;div class="form-group text-center"&gt;
                                  &lt;div class="col-md-8 mx-auto"&gt;
                                    &lt;button type="submit" name="submit" class="btn btn-outline-secondary btn-md"&gt;Submit&lt;/button&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/fieldset&gt;
                            &lt;/form&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
  &lt;div class="copyright"&gt;&amp;#169; Mu&amp;ntilde;oz Designs&lt;/div&gt;
  
                    &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
                    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"&gt;&lt;/script&gt;
                    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
                  &lt;/body&gt;
                  &lt;/html&gt;
  
  
   html{
      box-sizing: border-box;}
      *,
      *: before, 
      *: after {
        box-sizing: inherit;
        padding: 0;
        margin: 0;
      }
      body{
       background-image: url();
       width: 100%;
       height: 100%;
       background-position: bottom center;
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
       background-color: #464646;
       font-family:"Quicksand";
       font-size: 1.2em;
       line-height: 1.375em;
       padding: 0;
       margin: 0;
  
       background-color: #2F3A3B;
       -webkit-font-smoothing: antialiased;
  
     }
     navbar-brand{
  
      height: 3em;
      width: 3em;
      margin-top: -8px;
  
      margin-right: 1em;
      margin-left: 1em;
      margin-bottom: -8px
    }
  
  
    .avatar{
      border-radius: 5em;
      margin-right: .5em;
      margin-left: 1em;
  
    }
    .intro{
      display: inline-block;
      width: 100%;
      padding: 65px 0 65px;
  
      background-color: #2A2332;
      background-size: cover;
      font-size: 1.9em;
      text-align: center;
      color: #FFF;
  
    }
  
    h1{
      font-weight: medium;
      text-shadow:5px 5px 10px black;
      position: center;
    }
  
  
  
    .container{
      margin-top: 1em;
  
      margin-right: 1em;
  
    }
  
  
    .bigicon {
      font-size: 35px;
      color: #808080;
  
    }
  
    .input-icon {
      position: absolute;
      left: .5rem;
      top: .7rem;
  
      /* Keep icon in center of input, regardless of the input height */
    }
  
    .btn{
      margin-right:30%;
    }
  
    .input-icon {
  
     position: absolute;
     left: .5rem;
     top: .9rem;
   }
  
   #message {
    vertical-align: middle;
  }
  
  input {
    padding-right: 30px;
  }
  
  .form-control {
    text-indent: 2rem;
    width: 75%;
  }
  
  .input-wrapper {
    position: relative;
  
  
  }
  
  
  .copyright{
    bottom: 0%;
    position: fixed;
    color: #FFF;
    margin-left: .5%;
    font-size: 65%;
  }
  
  
  @media all and (max-width: 1280px){
    .form-control{
      width: 95%;
  
    }
    .btn{
      margin-right: 5rem;
  
    }
  
  @media all and (max-width: 1028px){
  
   .form-control{
    width: 100%; 
  }
  
  .btn{
    margin: auto;
  }
  }
  /*Tablet*/
  
  @media all and (max-width: 768px){
  
  
    .form-control{
      width: 100%;
  
    }
    .btn{
      margin:auto;
    }
  
  
  }
  
  /*mobile*/
  @media screen and (max-width: 360px) {
    .form-control{
      width: 100%;
  
    }
    .btn {
      margin: auto;
    }
  </code></pre>