Soporte » Diseño – Temas y plantillas » Número de columnas de galeria de fotos en dispositivos moviles

  • Resuelto emi8

    (@emi8)


    Hola,
    A ver si alguien me puede ayudar. Tengo en la portada de mi web una galeria de fotos que enlazan a categorias, y esta galeria esta compuesta por 3 columnas. Me gustaria que en dispositivos moviles estas 3 columnas pasaran a 1 para que las fotos se vean mejor, pero no consigo hacerlo. Alguien puede ayudar?

    saludos

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 4 respuestas - 1 de 4 (de 4 total)
  • Revisa en las opciones de la galería, ahora mismo tienes en móvil dos columnas y deberías tener una opción que te la deje a una.

    Si no te tocará hacerlo con css personalizado, modificar las media queries

    Por ejemplo:

    media="only screen and (max-width: 768px)"
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: 48%;
        float: left;
        clear: both;
        margin: 0 0 2.992em;
    }

    cambiar width: 48% por 100%

    https://www.w3schools.com/css/css3_mediaqueries.asp

    Hola,

    GRACIAS x contestar. Ese texto de que archivo es? porque he mirado en style.css, page.php de theme child q tengo instalado y no sale. De hecho esos archivos tienen poco texto, te dejo el copy&paste de style.php x ejemplo:
    /*
    Theme Name: SeoCrack Free Child
    Theme URI: https://crackplugins.com/mejor-tema-wordpress-seo/
    Template: seocrack_free
    Author: Hannibal Peralta
    Author URI: https://crackplugins.com/
    Description: developed and tested by Hannibal Peralta
    Tags: one-column,two-columns,right-sidebar,flexible-header,accessibility-ready
    Version: 1.0.1540493862
    Updated: 2018-10-25 18:57:42

    */

    saludos

    El código tienes que meterlo en el style.css de tu tema hijo o si no en el CSS Personalizado de tu plantilla.

    sería algo así:

    @media only screen and (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
    }
    }

    hola Jose,

    GRACIAS x contestar. El código va perfecto, ahora se ve cojonudo. Lo que ignoro es como se puso solito en 2 columnas, pq yo no toque nada d eso q recuerde. Cierro hilo y d nuevo gracias!

    saludos

Viendo 4 respuestas - 1 de 4 (de 4 total)
  • El debate ‘Número de columnas de galeria de fotos en dispositivos moviles’ está cerrado a nuevas respuestas.