NextCellent Gallery - NextGEN Legacy
Slideshows not scaling on mobile devices (5 posts)

  1. smilefoto
    Posted 2 years ago #

    My Nextcellent slideshow is beautiful on stationary computers and ipad but aren't responsive on smartphones.

    The wp site itself is fine but the pictures in the slideshow won't fit the screen. Please see http://www.smilefoto.se from your phone to replicate the issue!

    I have read everything I can find on the topic for weeks and among other things tried to enter %'s in the size window but that isn't allowed.

    Please help!

    Many thanks Emma


  2. niknetniko
    Posted 2 years ago #

    Sorry for the late response.
    First, add this to your css:

    .ngg-gallery {
    width: 100% !important;
    max-width: 350px; /*here you want to enter the maximum width of your slideshow */
    .ngg-gallery img {
    max-width: 100% !important;
    height: auto !important;

    Then, add this Javascript:

    <script type="text/javascript">
    jQuery( window ).resize(function() {
    var cw = jQuery('.ngg-slideshow').width();

    This should work. More information can be found here: http://wordpress.org/support/topic/plugin-nextgen-gallery-how-to-make-gallery-responsive-to-browser-size?replies=30

  3. niknetniko
    Posted 2 years ago #

    Oops, this should of course be:

    .ngg-slideshow {
    width: 100% !important;
    max-width: 350px; /*here you want to enter the maximum width of your slideshow */
    .ngg-slideshow img {
    max-width: 100% !important;
    height: auto !important;

    My mistake!

  4. WebmistressM
    Posted 2 years ago #

    Sadly, none of the suggestions above work for me. Im not having the issues (others here have described) regarding responsiveness in mobile view. However, I am having the issues when it comes to centering the images that appear in the slideshow, due to some images being landscape and others being portrait.

    Firebug did allow me to test if I could add margin-left: auto and margin-right auto to the inline css its pulling out. However, I have no clue how/where I would add that in. The jquery that niknetniko gave didnt seem to have any effect.

    Here is what I get inline on the slideshow, and where I can add the margin auto declarations in Firebug to get the centering I am seeking.

    'element {
    height: 155px;
    position: absolute;
    z-index: 6;
    top: 0px;
    left: 0px;
    display: none;
    width: 116px;
    opacity: 0;'

  5. VesaT
    Posted 2 years ago #


    You may test how your design works on any device with a free service at http://www.responsinator.com; just write your site URL into Responsinator and you will see the results for a number of devices. At least http://www.smilefoto.se does not seem to work fully ok on small screens - so the design itself is not responsive :(

    There is one simple addition to you theme's style.css file which you will find in theme's root folder

     limit image width to max. 100%
    img {
    max-width: 100%;

    This will make sure none of your images will not flow over on small screens.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic