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!
Thread Starter
gstar
(@gstar)
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?
Thread Starter
gstar
(@gstar)
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!
Thread Starter
gstar
(@gstar)
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 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:
- 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
- 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
(@gstar)
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
Thread Starter
gstar
(@gstar)
Fantastic that worked! Thank you 🙂
