Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Duda

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.

1 respuesta

¡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!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)