Question posted in 
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:
<!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ñ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">© Muñ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
Found the issue. Try changing the
text-indenttopadding-left.It seems that
text-indentwas a bug for mobile safari browserChange it at here
I checked your CSS and doesn’t see you reset it.
To reset the width, use below code.
for mobile screen at
@media (max-width: 768px). I think you should reset it to make it rendering properly.