Need Help Reducing Form Input Width

[Planet13]

I need help reducing the captcha element of a form from 100% down to something like 30% width.

The challenge is this is a theme that uses built-in modules and it is a little difficult to change the CSS (for me, anyway)

Here is the html (that is returned to the browser) for the captcha input for that form:

<div class="et_pb_contact_right">
<p class="clearfix">
5 + 14 =
<input class="input et_pb_contact_captcha" type="text" name="et_pb_contact_captcha" value="" size="2">
</p>
</div>

I tried using this CSS to reduce the input width to only 30%

.et_pb_contact_captcha p input, .et_pb_contact_captcha p textarea {width:30% !important;}

But unfortunately that doesn't reduce the width.

Instead, it appears that the width of ALL input fields is controlled by this css:

.et_pb_contact p input, .et_pb_contact p textarea {
  background-color: #eee;
  border: medium none !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  color: #999 !important;
  font-size: 14px;
  padding: 16px;
  width: 100% !important;
}

So is there an easy way to use the 30% width for ONLY the

<input class="input et_pb_contact_captcha" type="text" name="et_pb_contact_captcha" value="" size="2">

Captcha input form?

[LifeinAsia]

One problems I see with what you've tried is that the div class is "et_pb_contact_right" but you've been trying "et_pb_contact" (without "_right").

Do any of the following work?
.et_pb_contact_right input
.et_pb_contact_right p input
.et_pb_contact_right input["text"]
.et_pb_contact_right p input["text"]
.et_pb_contact_right input["text"].et_pb_contact_captcha
.et_pb_contact_right p input["text"].et_pb_contact_captcha

[not2easy]

The container for the input is the p.clearfix, that is not shown in your css. The input itself needs a close tag, either /> at the end of <input or an </input> at the end.

I don't see anywhere in the css where it is declaring a width of 30%.

The css that appears to be controlling all the widths may need some work, it appears that a width of 100% has been declared for all these elements:

.et_pb_contact 
p 
input, 
.et_pb_contact 
p 
textarea

Try applying a width: 30% only to the elements you want to be different and remove the selectors that are not all 100% from the css shown.

p

as a selector is applying a width of 100% to all paragraphs that do not have a class or a class specified in the css - same for

input

. What is the width in your css for

p.clearfix

? Try either:

p.clearfix {width: 30%;}

IF there are no other

<p class="clearfix">

on the pages that use the same css file. Or use:

input.et_pb_contact_captcha {width:30%;}

and remove

et_pb_contact_captcha

from that section of the css you posted where it has a width variable of 100%.

If you have other css that does take care of these widths (can't tell from what's shown) that may change the question.

[Planet13]

@ LifeinAsia:

Do any of the following work?
.et_pb_contact_right input
.et_pb_contact_right p input
.et_pb_contact_right input["text"]
.et_pb_contact_right p input["text"]
.et_pb_contact_right input["text"].et_pb_contact_captcha
.et_pb_contact_right p input["text"].et_pb_contact_captcha

Unfortunately, not.

I tried ALL of them followed by {width:30%;} and none of them worked at all.

When I looked at them in firebug, the

{width:30%;}

was struck through, so it was being overridden by the

.et_pb_contact p input, .et_pb_contact p textarea

input instead.

[Planet13]

Well, I think I MIGHT have it working (at least it is working in FF, chrome and opera on the desktop).

What I did was added a div around the outside of the whole form. I gave the div the id of

home_contact_form_id

(don't ask*).

<div id="home_contact_form_id">

Then I added this line of code to the CSS:

#home_contact_form_id .et_pb_contact_captcha p input, #home_contact_form_id .et_pb_contact_captcha p textarea {width:30%;}

And it works. Now the Captcha form field has a width of 30%.

Woo Hoo!

All I can say is, I need a beer...

~~~~~

Is it completely stupid to name my IDs with _id in the name, like:

home_contact_form_id

Is my life turning into one big punchline for code monkeys?