Question

I’m using normalize.css on a little project I’m working on in WordPress,but when I use a contact form, normalize is causing the text fields to span outside of the container:

http://notfilc.eu/wordpress/

The offending code is:

button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}

I could just remove this from normalize but I want to learn why it’s going out, and I just can’t see it. The HTML is pretty large so a reduced test case is pretty hard to achieve, however I’m willing to produce this afterwards for others to learn from if there’s a reasonable answer for this.

Answer 1

It is because you are using size=40

<input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" />

and hence it is overflowing.. My Fiddle

Try using size="30" or less and it will decrease..

If you want to limit the characters in the field use maxlength