it-swarm.com.de

WordPress-Galerie (.gallery-item) ansprechbar machen?

Shortcode für Galerie: [gallery link="file" columns="5" size="medium"]

Ich verwende eine Galerie mit 5 Spalten auf einer Innenseite einer Website. Wenn die Website auf Mobilgeräte und sogar Tablets reagiert, behalten die Bilder in der Galerie den Standardstil width: 20%; bei und erscheinen viel zu klein.

Ich habe versucht, einen Medienabfragestil hinzuzufügen, um die Breite in Prozent zu erhöhen. WP wendet jedoch weiterhin die Spaltenklasse .gallery-columns-5 an.

Idealerweise wäre es großartig, die Bilder in 5 Spalten für Desktops, 3 Spalten für Tablets und 1 Spalte für Mobilgeräte zu haben.

Wüsste jemand eine gute Lösung dafür?

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

Hierfür gibt es eine einfache Lösung. Lassen Sie die Galerie das 5-Spalten-Rastersystem verwenden und mit dem @media-queries können wir es für Tablets und Mobilgeräte ändern. Ich habe es gerade auf Ihrer angegebenen URL getestet und es funktioniert perfekt. Aber versuchen Sie, alle benutzerdefinierten Codes zu entfernen, die Sie zuvor verwendet haben, da ich sie entfernen musste, um den folgenden Code zu verwenden.

/* 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