[Resolved] Contact form 7 input and textarea height

Home Forums Support [Resolved] Contact form 7 input and textarea height

Home Forums Support Contact form 7 input and textarea height

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1613407
    Leanne

    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?

    #1613419
    Leo
    Staff
    Customer Support

    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/

    #1613437
    Leanne

    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?

    #1613669
    Leo
    Staff
    Customer Support

    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

    #1613809
    Leanne

    Perfect. Thank you.

    #1613821
    Leo
    Staff
    Customer Support

    No problem 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.