Check your theme’s stylesheet. Maybe it applies styles to the input field.
There are quite a few styles that deal with “input”. Is there one in particular that I need to edit?
Maybe try downloading the Firefox plugin called Firebug. Works great for trouble-shooting CSS stuff. You can just tag a field, and it will show you the CSS that pertains to that particular field. Then you’ll have a better sense of what CSS to edit.
I found its “class” and cant find it anywhere in the css.
<p><span class=”wpcf7-form-control-wrap A1″>
<input type=”text” name=”A1″ value=”” class=”wpcf7-form-control wpcf7-text” size=”5″ maxlength=”3″ /></span><b>A1.</b> Cactus Air Force</p>
It says size is 5, but is shows as 40.
try this:
<input type=”text” name=”A1″ value=”” class=”wpcf7-form-control wpcf7-text” size=”5″ maxlength=”3″ style=”width: 300px;” />
You’ll notice the added css: style=”width: 300px;”
You can style things in-page rather than editing the css sheet. Sometimes this is helpful for changing the look of things only on one page, rather than all of your pages.
For example:
<p style=”color: #a38bc1; font-size: 20px;”>Blah Blah</p>
Yeah, that makes sense except that the input style width cant be changed because Contact Form 7 uses shorthand. Unless I am missing something, I cant change that in-page.
Sorry about that. Yah you’re right. Got my posts mixed up with another forum post for a different plugin.
CSS won’t always be assigned to every class. Sometimes there is no corresponding CSS which means you can just enter your own. For instance, you’ll notice all pages within WP are automatically assigned a unique class such as:
<body class="page page-id-245 page-template">
in this instance you could add this to your css style sheet to style just this page individually, rather than affecting all pages in your template:
.page-id-245 {background-color: #333;}
In your case, you’ve got:
<p><span class.....</span></p>
So you could try just styling the p tag:
<p style="width: 150px;"><span class=.....></span></p>
Hello, i have textarea and i need it make it less width.
i follow help on http://contactform7.com/text-fields/ but there is textarea also too wide.
what should i use to make it smaller (on width)?
if i use 1×2 it is still too much wide.
thank you.
@waterworks2
So you could try just styling the p tag:
<p style=”width: 150px;”><span class=…..></span></p>
Thanks, this did make it smaller. My new problem occurs because I have the input in the same line as some text. I tried to fix it with lists, but it didnt work:
<ol class="cf7">
<li><p style="width: 50px;">[text A2 5/3]</p></li>
<li><p><b>A2.</b> Custer’s Final Campaign</p></li>
</ol>
I also tried using CSS to limit the size on individual li. The only thing that made it smaller was the <p> so I am not sure what is left to try.
