Contact Form fields extend on mobile devices

My site is: virginiaclubfender.com. The form on this page: https://virginiaclubfender.com/contact-us/ displays oddly. Most of the form fields line but a few extend.

Thank you in advance!

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 600px) {
      
      
      .wpcf7-form input, 
      .wpcf7-form textarea {
        width: 100%;
      }
      
    } 

and see if it helps.

Regards,
Kharis

Hi,

The code provided helped with all but the country dropdown. Thoughts?

Thanks again,
Heather

Hello Heather,

Please try this code:

    @media only screen and (max-width: 600px) {
      
      .wpcf7-form input, 
      .wpcf7-form textarea,
      .wpcf7-select,
      .wpcf7-form-control-wrap {
        width: 100%;
      }
      
    }  

Regards,
Kharis

Perfect. Thank you Kharis!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis