Make NextGen Galeries Responsive, by Kasper Plougmann
Includes PHP and CSS
/*
* CSS Name: Responsive NextGen Styles
* Description: NextGEN Gallery Responsive Stylesheet
* Author: Late Night Productions / Squazz
* Version: 1.1
*/
.ngg-galleryoverview {
display: flex !important;
flex-wrap: wrap;
}
.ngg-album-compact,
.ngg-gallery-thumbnail-box {
width: 98%;
padding:0 1% 5px 1% !important;
margin: 0 !important;
}
.ngg-album-compactbox {
line-height: 1;
}
.ngg-album-compactbox .Thumb,
.ngg-gallery-thumbnail img {
width: 100%;
height: auto;
margin: 0 !important;
padding: 0 !important;
}
.ngg-album-compact h4 .ngg-album-desc,
.ngg-gallery-thumbnail {
height: auto !important;
width: 100% !important;
}
.ngg-album-compact p {
line-height: 1;
}
.slideshowlink {
width: 100%;
}
/* iPhone / Droid – Landscape */
@media screen and (min-width: 480px) {
.ngg-album-compact,
.ngg-gallery-thumbnail-box {
width: 48%;
}
}
/* Small Tablets – 640px wide */
@media screen and (min-width: 640px) {
.ngg-album-compact,
.ngg-gallery-thumbnail-box {
width: 31%;
}
}
// NextGen gallery fix
function NextGen_styles_fix() {
wp_enqueue_style( 'NextGen-Responsive', get_stylesheet_directory_uri() . '/styles/nggallery.css', array('nextgen_basic_thumbnails_style'), '1.1' );
}
add_action( 'wp_enqueue_scripts', 'NextGen_styles_fix' );