3

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

I’m using a 5 column gallery on an inner page of a website, obviously when the site responds down to mobile and even tablet devices, the images within the gallery keep the default style of width: 20%; and appear far too small.

I have tried adding a media query style to increase the width in percentage, however WP still applies the column class .gallery-columns-5.

Ideally It would be great to have the images in 5 Columns for Desktop's, 3 Columns for Tablet's and 1 Column for Mobile Devices.

Would anyone know of a good fix for this?

/ ## 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%;
}
  • Can you post the code that you have tried? – Manoj Kumar Apr 30 '15 at 14:08
  • @ManojKumar Updated. – Tom25 Apr 30 '15 at 14:17
  • If you want to remove the class just filter it out: developer.wordpress.org/reference/hooks/gallery_style or create your own template-gallery.php file (I havent tried this yet but I assume it works like the rest of wordpress) – Guerrilla Apr 30 '15 at 14:17
  • Send me the URL of the gallery page @Tom25 – Manoj Kumar Apr 30 '15 at 14:18
6

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;
}
  • This is better, but it still leaves the white space and is being treated as 5 columns on tablet devices. It almost looks like there is an image missing. I have updated the code... – Tom25 Apr 30 '15 at 15:51
  • Code updated. This should fill the blank space. – Manoj Kumar Apr 30 '15 at 16:00
  • @streetfire No problem mate! :) – Manoj Kumar Oct 22 '15 at 1:26
  • 1
    Nice. You can stack this up to cover all galleries: .gallery-columns-4 .gallery-item , .gallery-columns-6 .gallery-item , .gallery-columns-7 .gallery-item – AJD Apr 25 '17 at 18:52
  • It seems WordPress has changed their code and now instead of having width above you need max-width. – Yunus Aug 18 '18 at 22:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.