Buenos días, estamos intentando modificar la vista móvil para asemejarla a la vista web, ya que en la vista móvil aparece todo muy grande y nos gustaría que apareciera el Grid similar a la versión web.
Web:
Móvil:
¿Hay alguna manera de asemejarlo a la versión web de una manera sencilla y que salgan los carteles de 3 en 3 y no de 1 en 1 ocupando toda la pantalla?
Muchas gracias.
Es crucial primero verificar si el tema que estás utilizando soporta la funcionalidad que deseas implementar. Si tu tema no permite esto, puedes considerar el uso de un sistema de grillas CSS para organizar tus elementos. La propiedad display: grid; es la mas útil para este propósito.
Aquí te dejo un ejemplo básico de cómo podrías estructurar tus columnas usando una grilla y media queries para adaptarse a diferentes tamaños de pantalla:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}
Los fr son fracciones de pantalla, es decir divides el contenedor en 3 fracciones tanto para móvil como para desktop pero tienes que tener un contenedor y 3 elementos hijos para hacer esto.
En este código, .container es la clase de tu contenedor de grilla. Las columnas se ajustarán automáticamente a la pantalla, con un mínimo de 300px de ancho cada una, y se reducirán a 150px en pantallas menores de 600px de ancho.
Si necesitas asistencia más específica, sería útil que compartieras un ‘preview’ o algún tipo de referencia visual. Esto me permitiría ver la estructura HTML actual y ofrecerte consejos más detallados y adaptados a tu situación particular.
Muchas gracias por tu respuesta Joseamayadev!
Lo he intentado como me has comentado pero solo hace más pequeñas las imágenes, el orden en móvil lo sigue manteniendo como vertical, te adjunto las dos imágenes de vista web y vista móvil. He modificado los parámetros para ver si lo conseguía pero sigue manteniendo la verticalidad. Lo he intentado hacer en dos fracciones en lugar de tres ya que creo que con dos columnas es más que suficiente para lo que necesitamos, pero lo lleva todo a un lado. Te adjunto imágenes.
1fr 1fr (así sería ideal, pero teniendo los cuadros a izquierda y derecha por igual).
1fr 1fr 1fr web
1fr 1fr 1fr móvil
Muchísimas gracias y un saludo!
