White gap around whole Thumbnail gallery

@leagcooks – You will need to use some custom CSS (usually relevant to your theme).

This should give you a place to start (based on Chrome developer tools):

.ngg-galleryoverview {
    margin-top: -20px;
    padding: 15px;
    float: none;
}

You may need to add the !important directive as well.

– Cais.

Hi,

Added the code but sadly nothing changed ??

@leagcooks – Where did you add it? Did you try the !important directive on each property? Did you clear you site/server/browser caches to ensure the custom CSS was being used?

– Cais.

Hi Cais,

I added it to the Custom CSS inserts in my appearance options where i add all the CSS and they work.

My theme is Atahualpa

Here is a link to the image to show what i mean regarding the white gap..

https://imgur.com/GPWPj14

Thanks for your help.

@leagcooks – Try adding the custom CSS under Gallery > Other Options > Style … Atahualpa can be tricky at times when you need to add some custom CSS.

Don’t forget to use the !important directive on each property as well.

– Cais.

Ive added this code to where you told me..

.ngg-galleryoverview {
margin-top: -20px !important;
padding: 15px !important;
float: none !important;
}

It centres the gallery but then puts gaps on the left hand side and right hand side can see here https://www.altontowersguide.com/gallery/construction/enchanted-village/10th-august-2014/

Thanks for continued help!

@leagcooks – You will have to fine-tune the actual values being used to get the exact look you want. I just provided those numbers as a quick reference point that should get you close.

– Cais.

Ok i have now managed to line up the thumbnails to the left hand side correctly, but there is still the gap on the right?

Here is the code i have used..

.ngg-galleryoverview {
margin-top: -10px !important;
margin-left: -4px !important;
padding: -20px !important;
float: none !important;
}

Any ideas how to reduce the gap on the right? I have tried margin-right but does not work

Thanks

@leagcooks – Negative padding is not recognized but try replacing that property with something like this:

padding: 0 0 0 9px !important;

See if that gets you closer (again, just a guideline).

– Cais.