Align width of textarea to text input fields
-
Hi,
I’m currently working with the Contact Form 7 plugin and I’m having trouble figuring out how to make the textarea to have the same width as the text input fields. Here’s a link to what it looks like now: http://postimg.org/image/ekk379gmp/. As you can see, the width of the message field does not align with that of the input fields. Here’s my CSS code:
/*— Contact Form 7 —*/
#left { width: 49%; float: left; margin-right: 2%;
}#right { width: 49%; float: left;
}.clearfix:after { content:”020″; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; margin-bottom:3px;
}.clearfix { display:block;
}.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 100%;
border: 1px solid #4f6c93;
}input.wpcf7-form-control.wpcf7-submit:hover {
background-color: #6081b2;
color: #fff;
border: 1px solid #6081b2;
height: 55px;
}
input.wpcf7-form-control.wpcf7-submit {
background-color: #4f6c93;
color: #fff;
border: 1px solid #4f6c93;
height: 55px;
}.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”] {height: 60px;
font-size: 15px;
font-color: #000;
}.wpcf7 textarea {
font-size: 15px;
font-color: #000;
width: 100%;
}/*— Contact Form 7 End —*/
And here’s the HTML:
<div class=”clearfix”>
<div id=”left”>
<p>
[text* your-vorname placeholder “Vorname *”] </p>
<p>
</div>
<div id=”right”>
<p>
[text* your-nachname placeholder “Nachname *”] </p>
<p>
</div>
</div>
<div class=”clearfix”>
<div id=”left”>
<p>
[email* your-email placeholder “E-Mail *”] </p>
<p>
</div>
<div id=”right”>
[text your-telefonnummer placeholder "Telefonnummer"] </p>
</div>
</div><p>
[textarea* your-nachricht placeholder “Nachricht *”] </p>* Diese Angaben sind erforderlich.
<p>[submit “Absenden”]</p>
As you can see, I have indicated a 100% width for the textarea in the CSS code, but the textarea field/message field just does not go wider than it is in the picture above. I’m pretty new to coding, so do you guys have any idea if I did something wrong in the code?
Thank you so much in advance!
The topic ‘Align width of textarea to text input fields’ is closed to new replies.