hello friends,

 

I have been trying to make wordpress contact form7 plugin textarea 100% width

 

but it never worked

same thing happens with input fields also the 100% doesnt work  on them too

although all other styles i applied worked

here is the css

/* Submit Button CF7 CSS Styles */

.wpcf7 input[type=submit] {
    padding:15px 45px; 
    background:#FF0000;
    color:#fff;
    font-size:30px;
    font-weight:bold; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}
/* File Upload Button CF7 CSS Styles */

.wpcf7 input[type=file] {
    padding:15px 25px; 
    background:#abffa9;
    color:#000;
    font-size:14px;
    border:1px solid #79c777;
    -webkit-border-radius: 2px;
    border-radius: 2px; 
}
/* Label Text Contact Form 7 CSS Styles */

.wpcf7 label {
   padding: 0 0 10px 0;
    font-size: 20px;
	/* color:green;
	background-color:yellow; */
}

/* Text Input Field Contact Form 7 Styles */

.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=tel], .wpcf7 input[type=number], .wpcf7 .wpcf7-select {
    font-size:20px;
    border: 1px solid red;
	padding:8px;
}

/* Textarea Field CF7 CSS Styles */

.wpcf7 textarea {
    width: 100% !important;
    color: red;
    font-size: 20px;
    border-color:red;
	padding:8px;
	background:#efefef;
}

only thing that worked is adjusting the columns in create contact form field where i added 80 columns

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Tel 
    [tel tel-706] </label>

<label> Your Date 
    [date date-928] </label>

<label> How You Found us? 
    [select menu-658 include_blank "friends" "email" "google"] </label>
<label> Upload File 
    [file file-570 limit:1mb filetypes:.jpg.jpeg] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message 80x] </label>

[submit "Send Message"]

 

Edited July 27, 20206 yr by sash_oo7

Probably because you are calling the style too early.

can you post a link to the page.

You haven't set any display property, so the browser will default to using display: inline; which ignores any width and height you have set. Add display: block to the input, textarea and labels and this should work as expected.

Please post a link to the page.

On 7/27/2020 at 2:57 PM, Jack said:

You haven't set any display property, so the browser will default to using display: inline; which ignores any width and height you have set. Add display: block to the input, textarea and labels and this should work as expected.

Hello sorry for late reply .

.but display block didnt solve the issue 

see the page here  https://webdesigncut.com/wordpress/luigis/sample-page/

Edited August 18, 20205 yr by sash_oo7

All the width are set inline by CF7.

Your CSS is being ignored. You need to do some investigation as to why this is.

Edited August 19, 20205 yr by fisicx

10 hours ago, sash_oo7 said:

Hello sorry for late reply .

.but display block didnt solve the issue 

see the page here  https://webdesigncut.com/wordpress/luigis/sample-page/

It should do, you're wrapping the form elements in a span which needs to be display block if you want it to work like that.

Yes, but the textarea has a fixed width of 80 columns. It's hard coded:

<textarea name="your-message" cols="80" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea>

One of the many reasons why CF7 isn't very good.

It's not CF7, the CSS just needs to be amended and the cols should be ignored.

.wpcf7-form-control-wrap {
  display: block;
}

 

13 hours ago, Jack said:

It should do, you're wrapping the form elements in a span which needs to be display block if you want it to work like that.

thanks..this did the trick

.wpcf7-form-control-wrap {
    position: relative;
	display:block;
}

i tried that before but it was not updating since i didn't add microtime() function in place of version  while enqueing style andclearing bowser cache was not having any effect

<?php 
/*previously
wp_enqueue_style( 'custom', get_template_directory_uri() . '/common/custom.css', array(),'1.0' );
*/
wp_enqueue_style( 'custom', get_template_directory_uri() . '/common/custom.css', array(), microtime() );
?>

 

Doesn't seem to be working for me. It's still 80 cols wide.

8 hours ago, sash_oo7 said:

thanks..this did the trick

.wpcf7-form-control-wrap {
    position: relative;
	display:block;
}

i tried that before but it was not updating since i didn't add microtime() function in place of version  while enqueing style andclearing bowser cache was not having any effect

<?php 
/*previously
wp_enqueue_style( 'custom', get_template_directory_uri() . '/common/custom.css', array(),'1.0' );
*/
wp_enqueue_style( 'custom', get_template_directory_uri() . '/common/custom.css', array(), microtime() );
?>

 

Just to be aware, your stylesheet will never cache if you add a timestamp like that and it's beneficial for performance to fetch from the cache instead of having to make a new request. What you probably want is for the file to be updated based on the modified date.

https://www.php.net/manual/en/function.filemtime.php

47 minutes ago, fisicx said:

Doesn't seem to be working for me. It's still 80 cols wide.

i didnt update it on the server

tested on local wamp server