web-dev-qa-db-fra.com

Rendre WordPress Gallery (.gallery-item) réactif?

Shortcode pour Gallery: [gallery link="file" columns="5" size="medium"]

J'utilise une galerie de 5 colonnes sur une page intérieure d'un site Web. De toute évidence, lorsque le site répond aux appareils mobiles et même aux tablettes, les images de la galerie conservent le style par défaut de width: 20%; et semblent beaucoup trop petites.

J'ai essayé d'ajouter un style de requête multimédia pour augmenter la largeur en pourcentage. Cependant, WP applique toujours la classe de colonne .gallery-columns-5.

Idéalement, il serait bon d'avoir les images dans 5 colonnes pour le bureau, 3 colonnes pour la tablette et 1 colonne pour les appareils mobiles.

Quelqu'un saurait-il une bonne solution à cela?

/ ## 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%;
}
imagescssgalleryresponsive
2
Tom25

Il existe une solution simple pour cela. Laissez la galerie utiliser le système de grille à 5 colonnes et en utilisant le @media-queries, nous pouvons le modifier pour tablette et mobile. Je viens de le tester sur votre URL donnée et cela fonctionne parfaitement. Mais essayez de supprimer tous les codes personnalisés que vous avez utilisés auparavant car je devais le supprimer pour pouvoir utiliser le code suivant.

/* 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;
}
5
Manoj Kumar