Skip to main content
se eliminaron 7 caracteres en el cuerpo
Origen Enlace
Rodrigo
  • 6.2k
  • 6
  • 16
  • 37

Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

introducir la descripción de la imagen aquí

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.

.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}
<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>

 

Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

introducir la descripción de la imagen aquí

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.

.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}
<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>

 

Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

introducir la descripción de la imagen aquí

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.

.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}
<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>

Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

introducir la descripción de la imagen aquí

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.

Codigo HTML:

<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>
.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}
<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>

Codigo CSS:`

 

.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}

 

Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

introducir la descripción de la imagen aquí

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.

Codigo HTML:

<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>

Codigo CSS:`

.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}

Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

introducir la descripción de la imagen aquí

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.

.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}
<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>
 

 
Origen Enlace

Input type no se agranda

Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

introducir la descripción de la imagen aquí

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.

Codigo HTML:

<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>

Codigo CSS:`

.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}