Contact form 7 input fields on mobile

[krtyler05]

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!

[friech]

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!