Text and Textarea: max. width and height in percent?

Resolved der-mali
(@der-mali)

11 years, 2 months ago

Hello there,

is there a possibility to define the maximum height and especially the maximum width for the fields, let’s say in percent?

My contact form looks fine in the desktop version of my page but the textarea field is too wide for the mobile version.
Of course I cna limit the width in an absolute number like 40 or 60 but it goes over the right edge of my page.

Example:
[textarea your-message 90%x10 “your message here …”]

Any ideas?

Thanks,
Thomas

http://wordpress.org/extend/plugins/contact-form-7/

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Takayuki Miyoshi
(@takayukister)

11 years, 2 months ago
The (cols)x(rows) option only affects the cols= and rows= attribute values of the textarea element. It doesn’t mean the width and height length. To specify the width and height length of the textarea, just add a style in the CSS stylesheet in your theme like this:
```
.wpcf7 textarea {
    width: 90%;
    height: 10em;
}
```
Thread Starter der-mali
(@der-mali)

11 years, 2 months ago

Hello Takayuki,

thank you for your answer.
It works for the “textarea” field but not for “email” and “text”:
text and email still go outside the border on the right side.

[text* your-name]
Your Name (required)

[email* your-email]
Your Email (required)

[text* your-phone]
Your Phone Number (required)

[text* your-subject]
Subject (required)

Your Message (required)
[textarea* your-message x12]

[captchac captcha size:l]
CAPTCHA: Please type the letters above in the box below
[captchar captcha]

<p>[submit “Send”]</p>

.wpcf7 textarea {
width: 90%;
height: 20em;
}

.wpcf7 text {
width: 90%;
height: 1em;
}

.wpcf7 email {
width: 90%;
height: 1em;
}
Plugin Author Takayuki Miyoshi
(@takayukister)

11 years, 2 months ago
The text and email tags of Contact Form 7 are represented as input element of HTML. Correct style is:
```
.wpcf7 input[type="text"] {
    width: 90%;
    height: 1em;
}
```
or
```
.wpcf7 input.wpcf7-text {
    width: 90%;
    height: 1em;
}
```
dakado
(@dakado)

11 years, 2 months ago

hi, is there a way to lengthen the [text* your-name] Your Name (required)

I tried the method above, but will not work on this area, works fine on the textarea part?

RGOnline
(@rgonline)

10 years, 4 months ago

#LEGENDS!

Thread Starter der-mali
(@der-mali)

10 years, 4 months ago

#LEGENDS!

What does it mean?