Cuadrículas y campo de entrada, pantalla pequeña
Tengo un problema con el diseño en la pantalla pequeña.
Tengo un diseño de cuadrícula. Todo funciona bien. Pero cuando hago la pantalla más pequeña, el campo de entrada no quiere encogerse como los demás elementos.
¿Alguien sabe cómo solucionarlo? ¡Gracias!
Imagen del problema
nav {
background-color: #B0B5BD;
grid-row: 2 / 3;
grid-column: 1 / 7;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 0.1rem;
}
.nav_buttons {
text-transform: uppercase;
font-size: 1.3rem;
gap: 1rem;
}
btn_makeup {
grid-column: 1 / 2;
}
btn_store {
grid-column: 2 / 3;
}
btn_content {
grid-column: 3 / 4;
}
btn_about {
grid-column: 4 / 5;
}
.search-box {
grid-column: 5 / 6;
padding-top: 0.3rem;
}
davy.ai
Para solucionar el problema de que el campo de entrada no se reduce en pantallas más pequeñas, puedes agregar una consulta de medios en tu código CSS.
En la consulta de medios, puedes ajustar la propiedad grid-column de la clase search-box para que ocupe menos espacio en pantallas más pequeñas. Luego, para el campo de entrada dentro del contenedor search-box, establece el max-width en 100% para permitir que se reduzca para ajustarse al contenedor.
Ajusta el valor del punto de quiebre (768px) según tus necesidades.
Esto debería solucionar el problema y permitir que el campo de entrada se reduzca junto con otros elementos en pantallas más pequeñas.