NextGEN Gallery Thumbnail Alignment Wrong

  • I’ve recently installed the NextGEN Gallery on my website.

    I’m having trouble with the thumbnails aligning in horizontal rows. It looks like the image thumbnails is going outside of it’s container div’s. The image thumbnails appear like steps and have a horiztonal line above and below each image that is greater than the width of the image.

    All thumbnails are equal width and height (and have been updated accordingly). I have tried adding set heights and widths with custom css (in both my css sheet and the next gen style sheet). Testing the plugin shows that there are no theme or plugin conflicts. I have also tried deleting and re-installing. I have not tried setting my theme to default.

    I think that something is pushing the image down and outside of the container div, possibly the span text for the description.

    Here is my css:

    .ngg-galleryoverview {
    border: 1px red solid;
    }

    .ngg-gallery-thumbnail-box {
    width: 320px;
    height: 200px;
    border: 1px blue solid;
    }

    .ngg-gallery-thumbnail {
    width: 310px;
    height: 180px;
    margin-top: 0px;
    border: 1px green solid;
    }

    .shutterset_set_1 {
    border: 1px orange solid;
    width: 310px;
    height: 180px;
    }

    .ngg-gallery-thumbnail span {
    border: 1px red solid;
    }

    Here is a link to my site: https://www.ellamobbs.com.au/portfolio/

    If anyone can help that would be swell.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using a browser developer tool for this kind of exploratory CSS work.
    I used Google Chrome’s built-in Developer Tool just because I find it particularly easy to expose underlying HTML and CSS as compared to Firebug.

    Now that you know the style, from being exposed/added by the Developer Tool, you can add a new style to override it.

    You ought to add new styles externally, not within the theme’s files. Changes to the theme’s files will compromise the theme and be compromised when the theme updates.

    External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.

    I recommend using the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.

    Thread Starter ellamobbs

    (@ellamobbs)

    Thanks for the feedback Andrew.

    I have been using Firefox Firebug to inspect the elements and override the code for those items in an external CSS sheet (the css for my websites theme).

    I am having trouble finding what I need to target to make the images fit within their container div. I will try Chrome’s built-in developer tool to see if I can find any other css that may be effecting the flow.

    I think that the description text for the images is pushing them out, but am unsure.

    Any guidance on how to make the images appear in a neat grid is helpful.

    Ta,
    Ella.

    Thread Starter ellamobbs

    (@ellamobbs)

    Resolved.

    My friend had a look at the code.

    I linked to the ng gallery on my page with this: [nggallery id=1]

    WordPress added in some tags like this:

    <b>[nggallery id=1]</b>

    (I had to view on ‘text’, not ‘visual’ on the page to see this).

    Which bumped everything down a little.

    With the

     and <b> tags the images align,

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘NextGEN Gallery Thumbnail Alignment Wrong’ is closed to new replies.