Search code examples
wordpresscsscontact-form-7

Fix Contact Form 7 Fields on Mobile

I am using Contact Form 7 for a form in a right column on this page http://ernielovespizza.com/get-in-touch/

It looks fine on desktop/tablet but on mobile the "NAME" and "EMAIL" fields extend past the screen on the right but the "MESSAGE" field is fine.

Does anyone know why this happens and what a fix could be?

This is my form code:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

At the moment I don't have any specific CSS for it. I used Visual Composer to build the website also.

Solution

  • You can add this rule to your custom CSS:

    .wpcf7 input {
  max-width: 100% !important;
}

    You might not need the !important (try it without that first), but if it doesn't work without that, add it.