Change field width

Hi,

Could you please post a link to your site to better understand your case?

Thanks!

Hi @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!

Hi @damiarita, well spotted.

I added this: `[intl_tel your-tel placeholder size=”40″ “Your Telephone”]
`
Not having any effect though. Am I missing something?

Tried also:

[intl_tel your-tel placeholder size:40 “Your Telephone”]

Hi @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!

Wow that works like magic! Thank you @damiarita

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 https://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!

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

I am sorry,

It is on line 257 of this file: https://www.studyinspaininenglish.com/wp-content/thesis/skins/pearsonified/css.css

I didn’t realize it wasn’t the same

Fantastic that worked! Thank you ??