Telephone field not responsive like the other fields

Hello, Im having a problem with the telephone number field not being responsive when its scaled down to mobile version

This is how it looks: https://dl.dropboxusercontent.com/u/3375306/Skjermbilde2.JPG

My CSS code:

/* Contact Form 7 ---------------------------------------------------------------------------
*/

.wpcf7 input,.wpcf7 textarea {
Clear:both;
float:none;
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),
color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
endColorstr='#e5e5e5',GradientType=0 ); /* ie */
}

textarea {
	width: 50%;
	resize: none;
}
/* Contact Form 7 --------------------------------------------------------------------------------------
*/

Tel field classes(Google Chrome):
class="wpcf7-form-control-wrap telefonnr

class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel"

My code:

<p>Ditt navn*<br />
    [text* your-name] </p>

<p>E-post<br />
    [email your-email] </p>

<p>Telefonnummer*<br />
    [tel* telefonnr placeholder "123 45 678"] </p>

<p>[radio foresporsel1 exclusive use_label_element "Option1" "Option2" "Option3"]</p>

<p>Emne*<br />
    [text* your-subject] </p>

<p>Melding*<br />
    [textarea* your-message] </p>
<p>* obligatoriske felt</p>
<p>[submit "Send"]</p>

http://wordpress.org/extend/plugins/contact-form-7/