yan-k
8/2/2015 - 12:13 PM

Make NextGen Galeries Responsive, by Kasper Plougmann Includes PHP and CSS

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' );