Supongamos que estamos viendo la pagina desde un celular, como se agruparían los tres objetos: corte, barba, corte + barba. pues por defecto el navegador pondria uno debajo del otro.
Supongamos que estamos viendo la pagina desde un celular, como se agruparían los tres objetos: corte, barba, corte + barba. pues por defecto el navegador pondria uno debajo del otro.
¡Hola Daniel!
Si estás viendo la página desde un celular, por defecto los tres objetos se agruparían uno debajo del otro, ya que el ancho de la pantalla es más pequeño que en una computadora de escritorio. Para lograr que los objetos se agrupen de otra manera, podrías utilizar media queries en tu hoja de estilos para definir diferentes estilos para diferentes tamaños de pantalla. Por ejemplo, podrías utilizar flexbox para que los objetos se agrupen en una sola fila en pantallas más grandes y en columnas en pantallas más pequeñas.
Aquí te dejo un ejemplo de cómo podrías utilizar flexbox para lograr esto:
.objetos {
display: flex;
flex-wrap: wrap;
}
.objeto {
flex-basis: 33.33%;
}
@media screen and (max-width: 767px) {
.objetos {
flex-direction: column;
}
}
En este ejemplo, .objetos
es el contenedor que contiene los tres objetos, y .objeto
es cada uno de los objetos. Con display: flex
y flex-wrap: wrap
, los objetos se agruparán en una sola fila en pantallas más grandes. Con flex-basis: 33.33%
, cada objeto ocupará un tercio del ancho del contenedor. Y con la media query, en pantallas más pequeñas se cambiará la dirección de flexbox a columna para que los objetos se agrupen en columnas en lugar de filas.
Espero que esto te sea de ayuda. ¡Buenos estudios!