galeria en 2 columnas para móvil

  • stayvb

    (@stayvb)


    hace 3 años, 5 meses

    hola,
    no sé si estoy en el foro adecuado. Os comento mi problema.
    En la página que estoy creando (ahora está solo de pruebas) una de las secciones lleva galerías por categorias. Tengo instalado el plugin meow gallery que funciona sobre la galería base de wordpress con el layout masonry. Para mostrar las galerias lo hago mediante shortcode indicando el numero de columnas, en mi caso 4. Tanto para pc como para tablet en horizontal funciona bien. En tablet vertical y movil horizontal me muestra 2 columnas, ahí bien también. Me gustaría que en movil vertical muestre también 2 columnas.
    He probado añadiendo el siguiente código css al CSS personalizable que aparece en wordpress e incluso añadiendo al css del tema hijo también y no me funciona. 

    @media only screen and (max-width: 469 px) {
 .gallery-columns-4 .gallery-item {
     width: 50%;
 }
 }

    también he probado así

    @media only screen and (max-width: 469 px) {
 .gallery-item {
     width: 50%;
 }
 }

    (ya sé que por ser responsive, lo ideal es que muestre las imágenes en 1 columna, pero he visto ejemplos en los que en woocomerce con sus productos funciona y supongo que para las galerías también habrá algún truco, aunque no doy con él.
    ¿me podeis ayudar? Muchas gracias.

    • Este debate fue modificado hace 3 años, 5 meses por jose64. Razón: Etiquetar código
Viendo 10 respuestas - de la 1 a la 10 (de un total de 10)
  • Moderador kallookoo

    (@kallookoo)

    hace 3 años, 5 meses

    Hola @stayvb

    Si saber que theme usas, poco podemos hacer ya que no podemos mirar el css que ya tienes y como podriamos especificarlo correctamente.
    Por favor, dinos cual es.

    Iniciador del debate stayvb

    (@stayvb)

    hace 3 años, 5 meses

    Hola 🙂
    El theme es oceanwp.
    La url de prueba que estoy utilizando es http://ocean.ilindar.es/crochet/amigurumis
    (es en la sección pruebaJ, una vez funcione, lo pasaré a la sección galeria de trabajos, que tenía otra cosa montada y he quitado, así que la sección galeria de trabajos por el momento da errores )

    Muchísimas gracias por vuestra ayuda.

    Moderador kallookoo

    (@kallookoo)

    hace 3 años, 5 meses

    hola @stayvb

    Por lo que veo se usa la propiedad column-count asi que deberias modificar ese valor de 1 a 2.
    El unico problema es que usa un id que diria cambia por cada galeria.
    En la que comentas es mgl-gallery-5facfe02b5ade.
    En teoria con este codigo deberia funcionar para todas las galerias.

    
@media oscreen and (max-width: 469 px) {
  .mgl-gallery.mgl-masonry {
    column-count: 1;
  }
}

    Si ves que no hace caso, entonces cambia el 1 por esto 1!important

    Iniciador del debate stayvb

    (@stayvb)

    hace 3 años, 5 meses

    Hola de nuevo,
    Acabo de probar de las dos formas que me has comentado y no me funciona ninguna de las 2. Sigue saliendo una columna de imágenes.

    Para llamar a la galeria, lo hago a traves del siguiente shortcode, no sé si tiene algo que ver:

    [gallery category="13"
    layout='masonry'
    orderby="id"
    animation="zoom-out"
    columns="4"
    ]

    Muchas gracias @kallookoo

    Moderador kallookoo

    (@kallookoo)

    hace 3 años, 5 meses

    Upps, mirando el codigo lo puse mal.
    Cambia oscreen por screen

    Iniciador del debate stayvb

    (@stayvb)

    hace 3 años, 5 meses

    Lo tenia puesto con only screen, lo he dejado solo con screen pero tampoco va..

    Moderador kallookoo

    (@kallookoo)

    hace 3 años, 5 meses

    Me he fijado que puse 1 en vez de 2 en el codigo anterior, supondo que lo cambiestes por 2.
    Si te distes cuenta y lo cambiestas, entonces prueba esto:

    
@media screen and (max-width: 469 px) {
  div[id^="mgl-gallery"] {
    column-count: 2!important;
  }
}

    Si aun asi no funciona, lo unico que se me ocurre es que contactes con el author del plugin para que te diga si es posible definir diferentes columnas por tamaños del dispositivo.

    Iniciador del debate stayvb

    (@stayvb)

    hace 3 años, 5 meses

    Hola de nuevo! 🙂

    Ya lo he conseguido 🙂 🙂 Probé el código y tampoco me funcinaba, pero me has dado muchas pistas con lo de column-count y con lo de que iba por id.

    Así que viendo que el código no funcionaba, he estado investigando en las carpetas del plugin y he dado con ello. He cambiado directamente en el código el numero de columnas a 2.

    @media screen and (max-width: 600px) {
    <?= $class_id ?> {
    column-count: 2;
    }
    }

    Me imagino que cuando haya actualizaciones de plugin, me tocará cambiarlo de nuevo, pero mientras busco otra solución, con esto me vale.

    Muchas, muchas muchas gracias por tu ayuda.
    Un saludo.

    Moderador kallookoo

    (@kallookoo)

    hace 3 años, 5 meses

    Si, tendras que modificarlo en cada actualizacion y no es recomendable hacerlo.
    Lo que me mosquea un poco es que no te funcione, cuando tenga mas tiempo lo probare yo mismo en una web de pruebas y te comento.

    Iniciador del debate stayvb

    (@stayvb)

    hace 3 años, 5 meses

    De acuerdo, muchas gracias. Yo seguiré investigando como poder ponerlo en los estilos del tema hijo o en los css de la opcion personalizada que da wordpress. Mientras me apaño con esta solución 🙂
    Gracias.

Viendo 10 respuestas - de la 1 a la 10 (de un total de 10)
  • El debate ‘galeria en 2 columnas para móvil’ está cerrado a nuevas respuestas.