1

lo normal sería que si tengo el "viewport" el contenido debería adaptarse a la pantalla si se hace pequeña o grande no? pero cuando hago pequeña la pantalla se deforma; Por ejemplo quiero que cuando lo reduzca se vea así: introducir la descripción de la imagen aquí

pero cuando yo lo reduzco se ve así:

introducir la descripción de la imagen aquí

el código es:

.div_1 {
  background: #222;
  margin: 0;
  font-family: sans-serif;
  height: 400px;
  border: 10px solid #000;
}

h2 {
  text-transform: uppercase;
}

form {
  margin: auto;
  margin-top: 80px;
  width: 600px;
  text-align: center;
  background: #111;
}

.form_input {
  padding: 8px;
  width: 500px;
  margin: 0;
  margin-top: 7px;
  margin-bottom: 8px;
  background-color: #222;
}
<div class="div_1">
  <form>
    <h2>formulario de contacto</h2>
    <div>
      <input class="form_input" type="text" placeholder="Nombre Completo">
    </div>
    <div>
      <input class="form_input" type="email" placeholder="Email">
    </div>
  </form>
</div>

1

1 respuesta 1

1

Tu problema es que tienes definido los elementos con un width fijo a 600px para el form y 500px para los inputs por lo cual cuando quieres hacerlo ajustable debes trabajar de la siguiente manera:

form {
    margin: auto;
    margin-top: 80px;
    width: 100%; /* auto ajuste de acuerdo al width máximo de la ventana */
    max-width: 600px; /* Se cambia el width como máximo */
    text-align: center;
    background: #111;
}
.form_input{
    padding: 8px;
    width: 100%; /* auto ajuste de acuerdo al width de la ventana */
    box-sizing: border-box; /* ajustar al máximo del elemento padre */
    max-width: 500px; /* se cambia de width a width máximo */
    margin: 0;
    margin-top: 7px;
    margin-bottom: 8px;
    background-color: #222;
}
<div class="div_1">
    <form>
        <h2>formulario de contacto</h2>
        <div>
            <input class="form_input"  type="text" placeholder="Nombre Completo" >
        </div>
        <div>
            <input class="form_input" type="email" placeholder="Email">
        </div>
    </form>
</div>

1
  • 1
    He editado tu respuesta para poner el código en un snippet, lo que permite que pueda ser ejecutado y probado justo aquí mismo en la respuesta desde el navegador. Este viene bien para ejemplos de este tipo, que usan HTML, CSS y JavaScript. Lo haces con el botón <> del editor.
    – jachguate
    Commented el 12 jun. a las 7:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.