1
I’m having a problem with the code of this site www.forcaemovimento.com.br
I have a form that has some div’s with position:absolute to do the side effect. The problem is that the footer is behind the form when accessing via mobile instead of being below the form. I believe it is something concerning DIV to be absolute, but I’m not sure 100%. I would need to fix this urgent to deliver to the client 100%. Below is the HTML and CSS used:
HTML
<div class="geral">
<div class="topo text-center">
<h1>Novidades em Movimento!</h1>
</div>
<div class="meio">
<div class="container">
<div class="col-md-offset-6 col-md-6">
<h6>Chegou a hora de começar uma vida saudável!</h6>
<div class="texto">
<p>Em breve você terá um site que lhe dará força e movimento com um novo conceito de treinamento funcional circuitado.</p>
<p>Desafie-se a ir alem, com aulas dinâmicas e motivadoras ministradas para pequenos grupos em ambientes abertos ou em condompinios.</p>
<p>Com orientação, suporte e auxílio de profissionais capacitados e especializados em treinamento funcional, corrida e musculação realize avaliações físicas periódicas e escolha se quer contratar suas aulas de maneira avulsa ou em pacotes mensais.</p>
<h5>O aquecimento já começou. Prepare-se para o novo site da força e movimento.</h5>
<form action="index.php" method="post" class="form-horizontal">
<div class="formulario">
<div id="triangle-bottomright">
<div id="triangle-bottomright-2"></div>
</div>
<div class="form-group ">
<label for="nome" class="col-sm-3 control-label">Nome:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="nome" id="nome" placeholder="" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email:</label>
<div class="col-sm-9">
<input type="email" class="form-control" name="email" id="email" placeholder="" required>
</div>
</div>
<div class="form-group">
<label for="telefone" class="col-sm-3 control-label">Tel.:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="telefone" id="telefone" placeholder="" required>
</div>
</div>
<div class="form-group">
<label for="participacao" class="col-sm-3 control-label">Participação:</label>
<div class="col-sm-9">
Mensal <input type="radio" name="participacao" value="Mensal"> Avulso <input type="radio" name="participacao" value="Avulso">
</div>
</div>
<div class="form-group">
<label for="nivel" class="col-sm-3 control-label">Nivel:</label>
<div class="col-sm-9">
Iniciante <input type="radio" name="nivel" value="Iniciante"> Intermediário <input type="radio" name="nivel" value="Intermediário"> Avançado <input type="radio" name="nivel" value="Avançado">
</div>
</div>
<div class="form-group">
<label for="mensagem" class="col-sm-3 control-label">Mensagem:</label>
<div class="col-sm-9">
<textarea class="form-control" name="mensagem" rows="7" required></textarea>
</div>
</div>
<div class="form-group">
<label for="mensagem" class="col-sm-3 control-label"> </label>
<div class="col-sm-9">
<input type="submit" name="submit" class="btn btn-primary" value="Enviar">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="rodape">
<div class="container">
<div class="col-md-5 col-sm-4 col-xs-12 col-md-offset-1">
<img src="images/logo.png" border="0" class="img-responsive">
</div>
<div class="col-md-5 col-sm-8 col-xs-12 col-md-offset-1">
<div class="contatos">
<p><i class="fa fa-mobile fa-2x"></i> 11 98071 3261</p>
<p><i class="fa fa-envelope-o"></i> [email protected]</p>
<p><i class="fa fa-globe"></i> forcaemovimento.com.br</p>
</div>
</div>
</div>
</div>
<div>
CSS
.topo{
background-color:#495358;
width:100%;
height:100px;
padding:20px;
}
.meio{
background-image: url('../images/background.png');
background-color:#000;
background-repeat: no-repeat;
width: 100%;
height:785px;
}
.rodape{
background-color:#495358;
width:100%;
height:200px;
padding:30px;
}
h1{
color:#fff;
font-size:60px;
text-shadow: 1px 1px 2px rgba(0,0,0, 1);
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
margin-top:0px !important;
margin-bottom: 0px !important;
}
h6{
color:#F84F00;
text-transform: uppercase;
font-weight: bold;
font-size: 17px;
font-weight: bold;
display: block;
}
h5{
color:#fff;
text-transform: uppercase;
font-weight: bold;
font-size:20px;
}
.formulario{
background-color:#D60000;
border-top:15px #DC5A25 solid;
padding:12px;
color:#fff;
position: relative;
min-height:480px;
}
.formulario label{
color:#fff;
font-weight: 100;
}
.formulario .form-control{
border-radius: 0px;
}
#triangle-bottomright {
width: 0;
border-bottom: 482px solid #D60000;
border-left: 100px solid transparent;
position: absolute;
top: -17px;
left:-100px;
}
#triangle-bottomright-2{
width: 0;
height: 0;
border-bottom: 480px solid #DC5A25;
position: absolute;
top: 2px;
left:-83px;
transform:skew(-13deg);
border-right: 40px solid #DC5A25;
}
.texto p{
color:#fff;
font-size:14px;
margin-bottom: 20px;
}
.contatos{
color:#fff;
font-size: 16px;
}
.contatos i{
margin-right: 10px;
}