Archived topic
Contact form 7 input and textarea height
5 replies · Started by Leanne on January 10, 2021
Hi,
I am using this CSS to try to make the input and text area fields height shorter. But it is not working.
/* Contact Form 7 Styles */
.wpcf7-textarea {
height 50% !important;
}
.wpcf7 input {
height 50% !important;
}
What I am I doing wrong?
Hi there,
Try this instead:
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
padding: 5px 15px;
width: 70%;
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
That is much better. However the text area is still a little tall.
Also, is it possible to control the width of the fields as well?
You could try something like this:
.wpcf7 textarea {
height: 100px;
}
And edited the CSS above for the width:
https://generatepress.com/forums/topic/contact-form-7-input-and-textarea-height/#post-1613419
Perfect. Thank you.
No problem :)