Title: Change field width
Last modified: December 6, 2016

---

# Change field width

 *  Resolved [gstar](https://wordpress.org/support/users/gstar/)
 * (@gstar)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/)
 * All other fields show much wider than this.
 * Is it possible to change the field width? Perhaps auto adapt?

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

 *  Plugin Contributor [damiarita](https://wordpress.org/support/users/damiarita/)
 * (@damiarita)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8522318)
 * Hi,
 * Could you please post a link to your site to better understand your case?
 * Thanks!
 *  Plugin Contributor [damiarita](https://wordpress.org/support/users/damiarita/)
 * (@damiarita)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8527349)
 * Hi [@gstar](https://wordpress.org/support/users/gstar/)
 * The rest of the inputs have the size attribute as 40 (`<input size="40" />`).
   That’s probably a CF7 default.
 * I can’t put the size as default to 40 in order not to modify the other people’s
   website behaviour.
 * I released version 1.4.4 where I added support to size option. Add size:40 to
   the shortcode of the international telephone before “Your Telephone” This will
   make the input as big as the rest of inputs.
 * Then, update your CSS so that it gets max-width as the rest of your inputs
 * Let me know how it goes!
 *  Thread Starter [gstar](https://wordpress.org/support/users/gstar/)
 * (@gstar)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8528321)
 * Hi [@damiarita](https://wordpress.org/support/users/damiarita/), well spotted.
 * I added this: `[intl_tel your-tel placeholder size=”40″ “Your Telephone”]
    ` 
   Not having any effect though. Am I missing something?
 *  Thread Starter [gstar](https://wordpress.org/support/users/gstar/)
 * (@gstar)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8528325)
 * Tried also:
 * [intl_tel your-tel placeholder size:40 “Your Telephone”]
 *  Plugin Contributor [damiarita](https://wordpress.org/support/users/damiarita/)
 * (@damiarita)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8533515)
 * Hi [@gstar](https://wordpress.org/support/users/gstar/),
 * I noticed you changed it to `size:30` . It looks very good in desktop version.
 * However, in mobile version, size 30 is too much. I suggest you to style the phone
   input as the rest of the inputs in the form: `size:40` and `max-with:100%;`
 * To do that, revert to `size:40` and add this in your CSS:
 *     ```
       .intl-tel-input {
           max-width: 100%;
       }
       ```
   
 * This way, all the inputs behave consistently for any screen size.
 * Hope it helps!
 *  Thread Starter [gstar](https://wordpress.org/support/users/gstar/)
 * (@gstar)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8535630)
 * Wow that works like magic! Thank you [@damiarita](https://wordpress.org/support/users/damiarita/)
 *  Plugin Contributor [damiarita](https://wordpress.org/support/users/damiarita/)
 * (@damiarita)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8543761)
 * Again, this is due to your CSS
 * You have these two CSS rules that style inputs of types text, email or textareas:
 *     ```
       .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
           width: 100%;
           padding: 8px;
           border: 1px solid #ccc;
           border-radius: 3px;
           -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
       }
       ```
   
 * line 39 of [http://www.studyinspaininenglish.com/?sccss=1&ver=35b79269acfe68229e114c1134b01e1e](http://www.studyinspaininenglish.com/?sccss=1&ver=35b79269acfe68229e114c1134b01e1e)
 *     ```
       input[type="text"], input[type="email"], .input_text {
           font-size: inherit;
           line-height: 1em;
           font-family: inherit;
           font-weight: inherit;
           color: #111111;
           border: 1px solid #d6d6d6;
           background-color: white;
           box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08);
           -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
       }
       ```
   
 * line 257 of the same file
 * The input my plugin adds is of type “tel” so, it is not affected by your style
   rules.
 * You have two options:
    1. Adding type tel by changing
        `.wpcf7 input[type="text"], .wpcf7 input[type="
       email"], .wpcf7 textarea` and `input[type="text"], input[type="email"], .input_text`
       by `.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type
       ="tel"], .wpcf7 textarea` and `input[type="text"], input[type="email"], input[
       type="tel"], .input_text`
    2. Not filtering by input type by changing
        `.wpcf7 input[type="text"], .wpcf7 
       input[type="email"], .wpcf7 textarea` and `input[type="text"], input[type="email"],.
       input_text` by `.wpcf7 input, .wpcf7 textarea` and `input, .input_text`
 * I suspect your CSS filter input types for a reason. So, I would go for option
   number 1
 * Let me know!
 *  Thread Starter [gstar](https://wordpress.org/support/users/gstar/)
 * (@gstar)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8544477)
 * Looking much better already!
 * The width is perfect, just the height I haven’t managed.
 * I could not find>
 * `input[type="text"], input[type="email"], .input_text`
 *  Plugin Contributor [damiarita](https://wordpress.org/support/users/damiarita/)
 * (@damiarita)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8544540)
 * I am sorry,
 * It is on line 257 of this file: [http://www.studyinspaininenglish.com/wp-content/thesis/skins/pearsonified/css.css](http://www.studyinspaininenglish.com/wp-content/thesis/skins/pearsonified/css.css)
 * I didn’t realize it wasn’t the same
 *  Thread Starter [gstar](https://wordpress.org/support/users/gstar/)
 * (@gstar)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8546373)
 * Fantastic that worked! Thank you 🙂

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

The topic ‘Change field width’ is closed to new replies.

 * ![](https://ps.w.org/international-telephone-input-for-contact-form-7/assets/
   icon-256x256.png?rev=2277878)
 * [International Telephone Input for Contact Form 7](https://wordpress.org/plugins/international-telephone-input-for-contact-form-7/)
 * [Support Threads](https://wordpress.org/support/plugin/international-telephone-input-for-contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/international-telephone-input-for-contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/international-telephone-input-for-contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/international-telephone-input-for-contact-form-7/reviews/)

 * 10 replies
 * 2 participants
 * Last reply from: [gstar](https://wordpress.org/support/users/gstar/)
 * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/change-field-width-2/#post-8546373)
 * Status: resolved