Fix Contact Form 7 Fields on Mobile

Question

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.

Answer 1

You can add this rule to your custom CSS:

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

您可能不需要!important（首先尝试使用该方法），但是如果没有该方法无法使用，请添加它。