• moumine

    (@moumine)


    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!

    https://wordpress.org/plugins/contact-form-7/

The topic ‘Align width of textarea to text input fields’ is closed to new replies.