I am seeking assistance with this extra space in front of my message field on the contact form.
When you click to start typing in the message field, it will begin where it says the word "Message." The following lines are in the exact placement.
I hope this is enough for a resolution. Please let me know if there is any additional information I can provide.
Image of contact form: https://i.stack.imgur.com/uZNbB.jpg
.wpcf7-form-control {
width: 300px;
height: 90px;
font-size: 24px;
float:left;
margin: 0;
padding: 0px;
}
/*
.wpcf7-form-control-wrap textarea {
text-indent: -30px;
}
*/
/*CF7*/
.wpcf7-form input {
border-radius:26px;
/* Makes the edges rounded */
}
.wpcf7-form textarea {
border-radius:6px; /* Makes the edges rounded */
}
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
padding-left:50px;
}
.wpcf7 input[type="checkbox"]{
margin:0 !important;
background-color: red !important
}
.wpcf7 p{ position: relative; }
.wpcf7 p .fa{
position: absolute;
color: #152135 ;
z-index: 100;
font-size: 18px;
top: 28%;
left: 3%;
}
.wpcf7 p .fa-pencil{ top: 5%; left: 1.5%}
.wpcf7 label{
font-size: 25px !important;
margin-bottom:5% !important;
}
#responsive-form{
max-width:80%;
margin:0 auto;
width:100%;
padding: 20px 0 20px 0;
}
.column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.column-half{
float: left;
position: relative;
padding: 0.65rem;
width:50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---- Media query -**/
@media only screen and (max-width: 799px) {
.column-half{
width: 100%;
}
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] {
height:57px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="tel"] {
width: 85%;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #cacaca;
font-size: 14px;
color: #3e4644 !important;
background-color: #f0f0f0;
font-weight: 200;
}
/* Contact Form 7 Submit Button
-------------------------------*/
.wpcf7 input[type="submit"] {
color: #ffffff;
font-size: 13px;
font-weight: 700;
background: #E2272E;
padding: 15px 25px 15px 25px;
border: none;
border-radius: 5px;
width: auto;
text-transform: uppercase;
letter-spacing: 5px;
}
.wpcf7 input:hover[type="submit"] {
background: #494949;
transition: all 0.4s ease 0s;
}
.wpcf7 input:active[type="submit"] {
background: #000000;
}
So far I tried to use the text-indent, padding, and margin to adjust it but have had no luck.
The text-indent worked the best because I was able to get the first line to look normal and type normal but when I got to the second line it started doing the same ident. Maybe if there is a way I can get the text-indent to apply to all the lines in the text box?
Lastly, thank you in advance for any help, solution, or suggestion that is provided on this post.