Title: NextGEN Gallery Thumbnail Alignment Wrong
Last modified: August 20, 2016

---

# NextGEN Gallery Thumbnail Alignment Wrong

 *  [ellamobbs](https://wordpress.org/support/users/ellamobbs/)
 * (@ellamobbs)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/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: [http://www.ellamobbs.com.au/portfolio/](http://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](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 5 months ago](https://wordpress.org/support/topic/nextgen-gallery-thumbnail-alignment-wrong/#post-3355017)
 * Try using a browser developer tool for this kind of exploratory CSS work.
    I 
   used Google [Chrome’s built-in Developer Tool](https://developers.google.com/chrome-developer-tools/docs/elements)
   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](https://wordpress.org/support/topic/nextgen-gallery-thumbnail-alignment-wrong/codex.wordpress.org/Child_Themes?output_format=md#Example_of_a_basic_Child_Theme)
   or through a plugin that provides Custom CSS functionality.
 * I recommend using the [Jetpack plugin](http://wordpress.org/extend/plugins/jetpack/)
   and its [Custom CSS functionality](http://jetpack.me/support/custom-css/) to 
   hold your CSS modifications.
 *  Thread Starter [ellamobbs](https://wordpress.org/support/users/ellamobbs/)
 * (@ellamobbs)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/nextgen-gallery-thumbnail-alignment-wrong/#post-3355038)
 * 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](https://wordpress.org/support/users/ellamobbs/)
 * (@ellamobbs)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/nextgen-gallery-thumbnail-alignment-wrong/#post-3355132)
 * 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.

## Tags

 * [alignment](https://wordpress.org/support/topic-tag/alignment/)
 * [steps](https://wordpress.org/support/topic-tag/steps/)
 * [thumbnails](https://wordpress.org/support/topic-tag/thumbnails/)

 * 3 replies
 * 2 participants
 * Last reply from: [ellamobbs](https://wordpress.org/support/users/ellamobbs/)
 * Last activity: [13 years, 5 months ago](https://wordpress.org/support/topic/nextgen-gallery-thumbnail-alignment-wrong/#post-3355132)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics