Contact form 7 input fields on mobile

Hi There,

I recently added a pretty long application form via Contact Form 7. The input fields look great on desktop, but are going off screen when viewed on mobile.

I tried referencing this article first: Contact Form 7 Input Fields Adjusting to Mobile

But had no success. I also have tried this:
.wpcf7 {width:100% !important;}

and this:
.wpcf7-form {width:100% !important;}

but that didn’t work either.

Any help on this would be much appreciated!

Hi Katie,

Thank you for writing in, its the upload file input fields that are causing your issue. Please apply the width: 100%; CSS rule on those input fields.

e.g.

	input[type="file"] {
	 /*CSS rules here*/
	}

You can also wrap that with a CSS media query so it will only affect the mobile view.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!