Probe volverlo responivo con @media
@media (max-width:834px) {
.cuadros__container{
display: inline-block;
}
}
Probe volverlo responivo con @media
@media (max-width:834px) {
.cuadros__container{
display: inline-block;
}
}
Hola Bryan,
Para hacer que tu diseño sea responsive para dispositivos móviles, puedes utilizar media queries en tu código CSS. En el caso que has mencionado, estás en el camino correcto al usar @media, pero es importante tener en cuenta que debes agregar las reglas CSS específicas para el diseño en dispositivos móviles dentro de las media queries.
Por ejemplo, para el contenedor de cuadros que mencionas, podrías ajustar el ancho, el espaciado o el número de columnas para que se adapte mejor a pantallas más pequeñas. Aquí tienes un ejemplo de cómo podrías modificar tu código:
/* Estilos para pantallas grandes */
.cuadros__container {
display: flex;
justify-content: space-around;
}
/* Estilos para pantallas más pequeñas, como dispositivos móviles */
@media (max-width: 834px) {
.cuadros__container {
flex-direction: column;
align-items: center;
}
}
En este ejemplo, estamos cambiando la dirección del flexbox a columna y centrando los elementos en pantallas más pequeñas. Puedes ajustar estas reglas según las necesidades específicas de tu diseño.
Espero que esto te ayude a hacer que tu diseño sea responsive para dispositivos móviles. ¡Buena suerte con tu proyecto!
¡Saludos!
@medias is great!