One Contact form field is shown smaller that the others

[jcsnoki]

(see attachment) – What can I do to let every field look same?

[Kyle – SUPPORT]

Try this custom css:

.wpcf7 input[type="email"] {

width:100%;

}

– Kyle

[InnoE]

Hi Kyle,

I have this same problem, but the code you gave doesn’t work for me. I have placed it in the custom css section in general options.

[InnoE]

Update: this is only happening if I place the contact form shortcode in a widget sidebar area. Otherwise it appears good on other pages, like fullwidth contact page.

[Kyle – SUPPORT]

Please can you send me a link to the problem so that I can check it out?

Thanks

– Kyle

[jcsnoki]

Link to my problem: http://www.gesamtschule-nordkirchen.de/ (footer); http://www.gesamtschule-nordkirchen.de/?page_id=15 (contact page). I used the css you gave me.

InnoE probably has the same problem?

[Melanie – SUPPORT]

Hey,

let me know if this brings all fields to a same size:

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 select {
width: 95%!important;
}

[jcsnoki]

Nope – sorry. (See: http://www.gesamtschule-nordkirchen.de/kontakt/ incl. Footer)

[InnoE]

Hi Melanie,

This doesn’t work for me either. I can’t post a link, because the website is currently offline, but the picture from jcsnoki shows exact the same problem I have. But only when you place the contact form shortcode in a widget sidebar. Otherwise it functions good.

Thank you!

[Melanie – SUPPORT]

jcsnoki your regular contact form looks perfect to me, can you specify?

The footer can be controlled with this custom css

#footer .wpcf7 input[type="email"] {
width: 99%!important;
}

[jcsnoki]

Hey Melanie, now it seems to work @ gesamtschule-nordkirchen.de. Thank you very much!
Only one little blemish: When I type my e-mail-address, it’s typed in another font than my ‘name’ oder the ‘message’ (see screenshot in attachment). Is it the intention? Or how can I change it?

Don’t know if InnoE solved his/her problem yet?

[Melanie – SUPPORT]

Ah okay,

add this custom css

input[type="email"] {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif!important;
font-weight: normal!important;
}

[InnoE]

Melanie, mine still doesn’t work the way it should. Can you help please?

[Kyle – SUPPORT]

Did you add Melanies css?

#footer .wpcf7 input[type="email"] {
width: 99%!important;
}

– Kyle

[InnoE]

Hi Kyle,

Yes I did, but I can see no changes unfortunately. The email field is still smaller than the other fields.