Haciendo que la Galería de WordPress (.gallery-item) responda?

2

Código corto para la galería: [gallery link="file" columns="5" size="medium"]

Estoy usando una galería de 5 columnas en una página interna de un sitio web, obviamente cuando el sitio responde a dispositivos móviles e incluso a tabletas, las imágenes dentro de la galería mantienen el estilo predeterminado de width: 20%; y aparecen demasiado pequeñas .

He intentado agregar un estilo de consulta de medios para aumentar el ancho en porcentaje, sin embargo, WP sigue aplicando la clase de columna .gallery-columns-5 .

Idealmente, sería genial tener las imágenes en 5 columnas para computadoras de escritorio, 3 columnas para tabletas y 1 columna para dispositivos móviles.

¿Alguien sabría de una buena solución para esto?

/ ## Gallery
--------------------------------------------- */

.gallery {
    overflow: hidden;
}

.gallery-item {
    float: left;
    margin: 0 0 30px;
    padding: 0 5px;
    text-align: center;
    width: 100%;
}

.gallery-columns-5 .gallery-item {
    width: 20%;
}

.gallery-columns-2 .gallery-item:nth-child(2n+1),
.gallery-columns-3 .gallery-item:nth-child(3n+1),
.gallery-columns-4 .gallery-item:nth-child(4n+1),
.gallery-columns-5 .gallery-item:nth-child(5n+1),
.gallery-columns-6 .gallery-item:nth-child(6n+1),
.gallery-columns-7 .gallery-item:nth-child(7n+1),
.gallery-columns-8 .gallery-item:nth-child(8n+1),
.gallery-columns-9 .gallery-item:nth-child(9n+1) {
    clear: left;
}

.gallery img {
    border: 1px solid #ddd;
    height: auto;
    padding: 4px;
}

.gallery img:hover {
    border: 1px solid #999;
}

@media only screen and (max-width: 800px)

.gallery-item {
    width: 33%;
}
    
pregunta Tom25 30.04.2015 - 15:56

1 respuesta

5

Hay una solución simple para esto. Deje que la galería use el sistema de cuadrícula de 5 columnas y el @media-queries podemos modificarlo para tabletas y dispositivos móviles. Acabo de probarlo en tu URL dada y funciona perfectamente. Pero intente eliminar cualquier código personalizado que haya usado anteriormente, ya que tuve que eliminarlo para poder utilizar el siguiente código.

/* For displaying 3 columns on tablet */
@media only screen and (max-width: 800px) {
 .gallery-columns-5 .gallery-item {
     width: 33%;
 }
}

/* For displaying single column on mobile */
@media only screen and (max-width: 480px) {
 .gallery-columns-5 .gallery-item {
     width: 100%;
 }
}

.gallery-columns-5 .gallery-item:nth-child(5n+1) {
     clear: none;
}
    
respondido por el Manoj Kumar 30.04.2015 - 16:36

Lea otras preguntas en las etiquetas