Responsive Wordpress Gallery

Question

I have been trying to make my Wordpress Gallery responsive with the help from another post: Making WordPress Gallery (.gallery-item) Responsive?

I would also like the original 5-column gallery to display three columns on a tablet. I have used the following css:

/* For displaying 3 columns on tablet */

@media only screen and (max-width: 800px) {
.gallery-columns-5 .gallery-item {
       width: 33% !important;
 }
}

This works and is now displaying three columns. But it leaves a blank space after every 5th picture. As suggested in the other post i tried

.gallery-columns-5 .gallery-item:nth-child(5n+1) {
 clear: none;
}

But this does not seem to work. Does anyone know how to get rid of the blank spaces and still display the page correctly on both tablets and desktops?

The URL for the page is: http://www.xn--l-guiden-44a.dk/billede-test

Answer 1

You need add some CSS to make it auto clear left after each 3th item and need to hide <br> tag

Update your code like this-

/* For displaying 3 columns on tablet */
@media only screen and (max-width: 800px) {
    .gallery-columns-5 .gallery-item {
        width: 33% !important;
    }
    .gallery-columns-5 br {
        display: none;
    }
    .gallery-columns-5 .gallery-item:nth-of-type(3n+1) {
        clear: left;
    }
}

Answer 2

Wordpress native galleries are not responsive as we need. This is Jquery solution to quickly overide the wp galleries markup from the frontend. No php involved, which makes it very simple and fast for a front end developer to achieve.

To fix this issue I have replaced the markup of the native wordpress gallery for a ul with li items that inside contain 2 span elements: one with the image, and the other with the caption.

This code sets you free from Wordpress native gallery CSS , by renaming classes and replacing elements. You will have to add custom CSS to specify how many elements you would like to display per row, also make custom breaking points with media queries will be necessary.

Hope this code helps people to overcome the issue of the lack of a Wordpress responsive gallery.

// replace dl with li

jQuery(jQuery('.gallery').find('dl').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('<li>'+jQuery(this).html()+'</li>'))
})

// replace dd with spans

jQuery(jQuery('.gallery').find('dd').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('<span class="image_container">'+jQuery(this).html()+'</span>'))
})

// replace dt with spans

jQuery(jQuery('.gallery').find('dt').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('<span class="caption_container">'+jQuery(this).html()+'</span>'))
})

// replace wordpress gallery container div with ul

jQuery(jQuery('.services_image_block').find('div.gallery').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('<ul class="wp_gallery_responsive">'+jQuery(this).html()+'</ul>'))
})

// remove break of line

jQuery(function() {
        jQuery( ".wp_gallery_responsive br" ).remove();

});

• This code can be added in the page template of single page to avoid changing all the galleries across the CMS.

• Another option is to add in the footer , then it will override all the wp gallery markup.

Hope this helps!