Hola tengo este formulario puesto en columnas, en concreto <div class="col-md-7 col-sm-12 col-xs-12" id="form_container">
. Pero está descolocado, y no encuentro forma de ponerle de ancho total y las label
y textarea
queden colocadas a un ancho total.
Creo que el error vendrá de otros estilos, pues hasta que les cambien para que funcionaran en los dispositivos móviles, ( con ayuda de @Alvaro Montoro, del Cano, y algún otro compañero) tenía la apariencia de ancho total, tanto textarea
como los input
. cosa que tampoco tendría por qué, ya que esos estilos les aplique con estilos @media
@media only screen and (min-device-width: 768px)
{
#form_container {
padding: 5%;
background: #ffffff;
border: 9px solid #f2f2f2;
max-width: 520px;
margin: auto;
}
}
/* Añadido por Checho parrado */
@media all and (max-width: 700px)
{
#form_container{
flex-direction: column;
padding: 10px;
}
}
@media screen and (max-width: 425px){
#form_container{
overflow-x: hidden;
}
}
h1, p
{
text-align: center;
}
input, textarea , /*button*/
{
width: 100% !important;
}
textarea
{
height: 200px !important;
}
button{
background-color: #3bbec0 ;
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>formulario</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<section id="works">
<class="home-section color-dark text-center bg-white">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div>
<div class="animatedParent">
<div class="section-heading text-center">
<h2 class="h-bold animated bounceInDown">consultenos sin compromiso</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="text-center col-md-5 col-sm-12 col-xs-12" id="informacion">
<figure>
<img src="../img/logo1.png" alt="Imagen de agrochema">
</figure>
<p>C/ bruselas,8</p>
<p>05400 Arenas de San Pedro</p>
<p>(Avila)</p>
<p>arenas@gmail.com</p>
<p>Puede seguir
<a href="#punki">mi trabajo</a> en las redes sociales.</p>
</div>
<div class="col-md-7 col-sm-12 col-xs-12" id="form_container">
<div class="form-container">
<script src='https://www.google.com/recaptcha/api.js'></script>
<h5>
Contacte conmigo
</h5>
<form method="post" id="reused_form">
<label for="name">Nombre:</label>
<input id="name" type="text" name="Name" required maxlength="50" placeholder="Nombre...">
<label for="email">Email :</label>
<input id="email" type="email" name="Email" required maxlength="50" placeholder="Correo electronico...">
<label for="message">Mensage:</label>
<textarea id="message" name="Message" rows="10" maxlength="6000" required></textarea>
<div class="g-recaptcha" data-sitekey="6LfMA0sUAAAAALFN5W-V06LOOeWEUf7T2hVlt5Yu"></div>
<button class="button-primary" type="submit">Enviar</button>
</form>
<div id="success_message" style="display:none">
<h3>¡¡ El mensaje se envió con éxito...!!</h3>
<p>Nos pondremos en contacto con usted pronto. </p>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h3>Error</h3>Lo sentimos, hubo un error al enviar su formulario.</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>