Making WordPress Gallery (.gallery-item) Responsive?

There is a simple solution for this. Let the gallery use the 5 column grid system and using the @media-queries we can alter it for tablet and mobile. I just tested it on your given URL and it works perfect. But try to remove any custom codes you have used before since I had to remove it in order to use the following code.

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

Leave a Comment