Text overlapping font awesome icon- happened only in mobile/tablet devices

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.

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.

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.

I have added a photo to prove this and below is my code:

enter image description here

<!DOCTYPE html>
<html>
<head>
  <title>Contact</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 <link rel="stylesheet" type="text/css" href="contact.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



</head>
<body>

  <!--Homepage link-->   
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="index.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Mu&ntilde;oz Designs</a>

    <!--Toggle Button-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span></button>

      <!--Navbar links-->
      <div class="collapse navbar-collapse text-center" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <li class="nav-item">
              <a class="nav-link"
              href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link"
              href="portfolio.html">Portfolio</a>
            </li>

            <!--Social Media Icons-->
                  <li class="nav-item">
              <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

              <li class="nav-item">
                <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

                <li class="nav-item">
                  <a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                  <li class="nav-item">
                    <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>

                    <li class="nav-item">
                      <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>

                      <li class="nav-item">
                        <a class="nav-link" href="contact.php" title="Email">
                          <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                        </ul>
                      </div>
                    </div>
                  </nav>
                  <!--Intro of Contact-->

                  <div class="intro">
                    <h1>Contact</h1>
                    <h4>If you would like to work with me, send me a message!</h4>
                  </div>

                  <!--Contact Form-->

                  <div class="container">

                    <?php if ($msg !=''): ?>

                      <div class="alert <?php echo $msgClass; ?>"><?php echo $msg; ?></div>

                    <?php endif; ?>

                    <div class="row">
                      <div class="col-sm-12 mx-offset-auto">
                        <div class="well well-sm">
                          <form class="form-horizontal" method="post">

                            <fieldset>

                              <div class="form-group">
                                <div class="col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <input id="fname" name="name" placeholder="Name" type="text" class="form-control" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
                                    <label for="fname" class="fa fa-user input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group">
                                <div class=" col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <input id="email" name="email" type="text" placeholder="Email" class="form-control" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">
                                    <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group">
                                <div class=" col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"><?php echo isset($_POST['message']) ? $message : ''; ?></textarea>
                                    <label for="message" class="fa fa-pencil input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group text-center">
                                <div class="col-md-8 mx-auto">
                                  <button type="submit" name="submit" class="btn btn-outline-secondary btn-md">Submit</button>
                                </div>
                              </div>
                            </fieldset>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>

<div class="copyright">&#169; Mu&ntilde;oz Designs</div>

                  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                  <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"></script>
                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
                </body>
                </html>


 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;
  }

2 answers

  • answered 2018-02-13 03:02 AKZhang

    Found the issue. Try changing the text-indent to padding-left. It seems that text-indent was a bug for mobile safari browser

    Change it at here

    .form-control {
      padding-left: 2rem; // change here
      width: 75%;
    }
    

     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 {
      padding-left: 2rem; // change here
      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;
      }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Contact</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
      <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="contact.css">
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    
    
    
    </head>
    <body>
    
      <!--Homepage link-->   
      <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a class="navbar-brand" href="index.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Mu&ntilde;oz Designs</a>
    
        <!--Toggle Button-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span></button>
    
          <!--Navbar links-->
          <div class="collapse navbar-collapse text-center" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <li class="nav-item">
                  <a class="nav-link"
                  href="about.html">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"
                  href="portfolio.html">Portfolio</a>
                </li>
    
                <!--Social Media Icons-->
                      <li class="nav-item">
                  <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    
                  <li class="nav-item">
                    <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
    
                    <li class="nav-item">
                      <a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    
                      <li class="nav-item">
                        <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
    
                        <li class="nav-item">
                          <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
    
                          <li class="nav-item">
                            <a class="nav-link" href="contact.php" title="Email">
                              <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                            </ul>
                          </div>
                        </div>
                      </nav>
                      <!--Intro of Contact-->
    
                      <div class="intro">
                        <h1>Contact</h1>
                        <h4>If you would like to work with me, send me a message!</h4>
                      </div>
    
                      <!--Contact Form-->
    
                      <div class="container">
    
                        <?php if ($msg !=''): ?>
    
                          <div class="alert <?php echo $msgClass; ?>"><?php echo $msg; ?></div>
    
                        <?php endif; ?>
    
                        <div class="row">
                          <div class="col-sm-12 mx-offset-auto">
                            <div class="well well-sm">
                              <form class="form-horizontal" method="post">
    
                                <fieldset>
    
                                  <div class="form-group">
                                    <div class="col-md-8 mx-auto">
                                      <div class="input-wrapper">
                                        <input id="fname" name="name" placeholder="Name" type="text" class="form-control" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
                                        <label for="fname" class="fa fa-user input-icon bigicon"></label>
                                      </div>
                                    </div>
                                  </div>
    
                                  <div class="form-group">
                                    <div class=" col-md-8 mx-auto">
                                      <div class="input-wrapper">
                                        <input id="email" name="email" type="text" placeholder="Email" class="form-control" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">
                                        <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                                      </div>
                                    </div>
                                  </div>
    
                                  <div class="form-group">
                                    <div class=" col-md-8 mx-auto">
                                      <div class="input-wrapper">
                                        <textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"><?php echo isset($_POST['message']) ? $message : ''; ?></textarea>
                                        <label for="message" class="fa fa-pencil input-icon bigicon"></label>
                                      </div>
                                    </div>
                                  </div>
    
                                  <div class="form-group text-center">
                                    <div class="col-md-8 mx-auto">
                                      <button type="submit" name="submit" class="btn btn-outline-secondary btn-md">Submit</button>
                                    </div>
                                  </div>
                                </fieldset>
                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
    
    <div class="copyright">&#169; Mu&ntilde;oz Designs</div>
    
                      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                      <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"></script>
                      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
                    </body>
                    </html>

  • answered 2018-02-13 03:16 Khoi Ngo Nguyen

    I checked your CSS and doesn't see you reset it. To reset the width, use below code.

    .form-control {
      text-indent: ...rem;
      width: ...%;
    }
    

    for mobile screen at @media (max-width: 768px). I think you should reset it to make it rendering properly.