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%;
}
Improve this question
4
  • Can you post the code that you have tried?
    – m4n0
    Commented Apr 30, 2015 at 14:08
  • @ManojKumar Updated.
    – Tom25
    Commented Apr 30, 2015 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
    Commented Apr 30, 2015 at 14:17
  • Send me the URL of the gallery page @Tom25
    – m4n0
    Commented Apr 30, 2015 at 14:18

1 Answer 1

Reset to default
8

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;
}
Improve this answer
5
  • 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
    Commented Apr 30, 2015 at 15:51
  • Code updated. This should fill the blank space.
    – m4n0
    Commented Apr 30, 2015 at 16:00
  • @streetfire No problem mate! :)
    – m4n0
    Commented Oct 22, 2015 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
    Commented Apr 25, 2017 at 18:52
  • It seems WordPress has changed their code and now instead of having width above you need max-width.
    – Yunus
    Commented Aug 18, 2018 at 22:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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