Formulário Responsivo.

[JoseVitor 0]

Tenho um formulário de contato só que quando abro no celular os inputs continuam do mesmo tamanho, mesmo quando já troquei o width deles para porcentagem.

Segue codigo Html e CSS,

 

-------------------------------------------------HTML---------------------------------------------------------

<div class="tab-content">
     <div id="pessoaFisica" class="tab-pane fade in active">
       <form action="contact-bra.php" method="post" >
       <?php include("enviarPessoaFisica.php")?>  
<table border="0" cellpadding="0" cellspacing="2"> 
<tr>
<td colspan="3"><p class="text-1 space">Dados Pessoais</p></td>
</tr>
<tr>
<td colspan="3">
<fieldset><label class ="labels space" for="nome">*Nome</label><br>
<input name="nome" class="required input-extrabig space" id="nome" type="text" value="<?echo $nome ;?>"></fieldset>
</td>
</tr>
<tr>
<td>
<fieldset><label class="labels space" for="cpf">*CPF</label><br>
<input name="cpf" class="required input-big-left space" placeholder=" 000.000.000-000" id="cpf" type="text" value="<?echo $cpf ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="rg">*RG</label>
<input name="rg" class="required input-medium-center space" placeholder=" 00.000.000-000" id="rg" type="text" value="<?echo $rg ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="nascimento">Data de Nascimento</label>
<input name="nascimento" class="required input-medium-right space" placeholder=" DD/MM/AAAA" id="nascimento" type="text" value="<?echo $nascimento ;?>"></fieldset>
</td>
</tr> 
<tr>
<td colspan="3"><p class="text-1 space">Endereço</p></td>
</tr>
<tr>
<td colspan="2">
<fieldset><label class="labels space" for="endereco">*Endereço</label><br>
<input name="endereco" class="required input-big-left space" id="endereco" type="text" value="<?echo $endereco ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="numero">Número</label>
<input name="numero" class="required input-medium-right space" id="numero" type="text" value="<?echo $numero ;?>"></fieldset>
</td>
</tr>
<tr>
<td>
<fieldset><label class="labels space" for="complemento">Complemento</label>
<input name="complemento" class="input-big-left space" id="complemento" type="text" value="<?echo $complemento ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="bairro">Bairro</label>
<input name="bairro" class="required input-medium-center space" id="bairro" type="text" value="<?echo $bairro ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space"for="cep">*CEP</label>
<input name="cep" class="required input-medium-right space" placeholder=" 00000-000" id="cep" type="text" value="<?echo $cep ;?>"></fieldset>
</td>
</tr>
<tr>
<td colspan="2">
<fieldset><label class="labels space" for="cidade">Cidade</label><br>
<input name="cidade" class="required input-big-left space" id="cidade" type="text" value="<?echo $cidade ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="estado">Estado</label>
<input name="estado" class="required input-medium-right space" id="estado" type="text" value="<?echo $estado ;?>"></fieldset>
</td>
</tr>
<tr>
<td colspan="3"><p class="text-1 space">Contato</p></td>
</tr>
<tr>
<td>
<fieldset><label class="labels space" for="email">E-mail</label>
<input name="email" class="required input-big-left space" id="email" type="text" value="<?echo $email ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="celular">Celular</label>
<input name="celular" class="input-medium space" placeholder=" (DDD)9-0000-0000" id="celular" type="text" value="<?echo $celular ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="telefone">Telefone</label>
<input name="telefone" class="required input-medium space" placeholder=" (DDD)0000-0000" id="telefone" type="text" value="<?echo $telefone ;?>"></fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<label class="labels space" for="mensagem">Mensagem</label>
<textarea id="mensagem" class="space" cols="55" rows="5" name="mensagem"><?echo $mensagem;?></textarea><br/>
</fieldset>
</td>
</tr>
<tr>
<td colspan="3"><input name="enviarPessoaFisica" type="submit" class="bt-form right" value="Enviar"></td>
</tr>
        </table> 
</form>
</div>
   </div> 

------------------------------------------------------------------CSS-----------------------------------------------------------------------------------

fieldset {
    margin: 0 0 20px 0;
    border: 0;
    margin: 0;
    padding: 0;
}
button, input {
    line-height: normal;
}
 
label{
    display: block;
    font-style: italic;
    color: #6e6e6e;
    font-size: 13px;
    line-height: 100%;
}
input, textarea {
    border: 1px solid #bfc2c4;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
    font-size: 13px;
    color: #333;
    padding: 10px;
}
td{
margin:0px 0px 0px 0px;
vertical-align: top;
}
table {
    border-collapse: collapse;
    border-spacing: 0px;
    margin-left: 100px;
}
.space{
margin-left: 20px;
}
.labels{
margin-top: 20px;
}
.input-extrabig {
    width: 97%;
}
.input-big-left{
width: 95%;
}
.input-medium-center {
    width: 85%;
}
.input-medium-right {
    width: 88%;
}
.input-medium {
    width: 230px;
}
.text-1{
color: #333333;
font-style: italic;
font-weight: 600;
font-size: 13px;
line-height: 140%;
margin-top: 20px;
}
.right {
    float: right;
    margin-bottom: 10px;
    margin-top: 10px;
}
.bt-form{
    border-radius: 3px;
    border: 1px solid #bdbfc0;
    padding: 10px 15px;
    font-size: 13px;
    color: #374452;
    background: -moz-linear-gradient(top,#fff 0,#f5f5f5 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f5f5f5));
    background: -o-linear-gradient(top,#fff 0,#f5f5f5 100%);
    background: linear-gradient(top,#fff 0,#f5f5f5 100%);
}
.bt-form:focus{
    background: -moz-linear-gradient(top,#ededed 0,#fff 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ededed),color-stop(100%,#fff));
    background: -o-linear-gradient(top,#ededed 0,#fff 100%);
    background: linear-gradient(top,#ededed 0,#fff 100%);
    outline:none;
}
 
.bt-form:hover{
    border: 1px solid #a7a7a7;
    background: -moz-linear-gradient(top,#fff 0,#ededed 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#ededed));
    background: -o-linear-gradient(top,#fff 0,#ededed 100%);
    background: linear-gradient(top,#fff 0,#ededed 100%);
}
  

Agradeço qualquer ajuda.

[pedropgomes 4]

Dá uma olhada nesse link aqui http://pt-br.learnlayout.com/ aprendi um pouco de Design responsivo e pode te ajudar certeza! o que vc precisa é media querries

[lciceris 7]

Fala @JoseVitor, aqui nesse post eu ensino como criar um formulário responsivo com html e css, creio que vai te ajudar.