Tenho o seguinte:
HTML:
<div class="sessoes">
<div class="formContato">
<h1 class="h1Centralizado">Fale Conosco</h1>
<form id="contato" action="contato.php" method="post">
<input type="hidden" name="acao" value="enviar" />
<br />
<div class="contatoEsquerdo">
<label class="labelPequeno" style="color:#FFF;">Assunto</label>
<select style="width: 212px; height:52px;" id="assunto" name="assunto" required>
<option value="">Escolha o assunto</option>
<option value="1">Quero Comprar</option>
<option value="2">Quero Vender</option>
<option value="3">Informação sobre Imóvel</option>
<option value="4">Elogio</option>
<option value="5">Outro</option>
</select>
<br />
<br />
<div class="qual" style="display:none">
<label class="labelPequeno" style="color:#FFF;">Qual?</label>
<input type="text" class="typeTextMedio" maxlength="200" id="qual" name="qual" />
<br />
<br />
</div>
<label class="labelPequeno" style="color:#FFF;">Nome</label>
<input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" required />
<br />
<br />
<label class="labelPequeno" style="color:#FFF;">Telefone</label>
<input type="tel" class="typeTextMedio" maxlength="14" id="telefone" name="telefone" />
<br />
<br />
<label class="labelPequeno" style="color:#FFF;">Email</label>
<input type="email" class="typeTextMedio" required maxlength="200" id="email" name="email" />
<br />
<br />
</div>
<div class="contatoDireito">
<h1 style="text-align:center; width:100%;">Descrição</h1>
<br />
<textarea name="descricao" id="descricao" cols="60" rows="15"></textarea>
<br />
<br />
</div>
<div style="clear:both; width:100%; text-align:center;">
<input type="submit" value="Enviar" />
<br />
<br />
</div>
</form>
</div>
<div style='text-align:center'><a href='javascript:history.go(-1)'><img src='_img/voltar.png' title='Voltar' /></a><br />
<br />
</div>
jQuery:
// JavaScript Document
$(document).ready(function() {
$("#assunto")
.change(function () {
if(this.value == 5) {
$(".qual").css("display", "block");
$("#qual").prop("required",true);
} else {
$(".qual").css("display", "none");
$("#qual").prop("required",false);
}
})
$("#descricao").htmlarea();
$("#contato").on("submit", function (){
if($('#descricao').val() == "") { //verifica apena o texto
alert("Descrição não está preenchida!");
$('#descricao').siblings().each(function(){
if ($(this).children('iframe').length){
var iframe=$(this).children('iframe')[0];
iframe.contentWindow.focus();
}
});
return false;
}
});
});
CSS:
.sessoes
{
/*width: 97.65625%;*/
width:1000px;
}
.contatoEsquerdo, .contatoDireito {
display:inline-block;
vertical-align:top;
padding:0;
margin:0 auto;
}
.contatoEsquerdo {
width:40%;
}
.contatoDireito {
width:58%;
}
@media screen and (min-width: 0px) and (max-width:320px) {
.contatoEsquerdo, .contatoDireito, {
width:100%;
}
.textarea {
width:auto;
}
}
Bom, em tela acima de 1000px tudo ok! Mas quando jogo para tela de celular 320x480, então não consigo jogar a textarea para baixo dos outros campos e fica uma bagunça;
Por favor, vejam isso em http://www.dinamicaimoveis.com.br/novo/contato.php?acao=form
Detalhe: em telas acima de 1000px o erro não ocorre. Apenas com a textarea esta dando este problema. Com outros elementos (tipo li's de menu) não ocorre. Ou seja, ela não desce.