Center NextGen Gallery in WordPress

2 Views

I am using a NextGen Gallery on my WordPress site, but the gallery box does not respect the lefthand margin of the rest of the page (that is, all other images, text, etc. is has some sort of indentation or padding, but the NextGen Gallery floats all the way to the left). I would like to prevent it from overriding this padding, or at least to float to the center. I’ve tried editing the css in several places, but I may be editing the wrong class, or something. An example of the gallery is near the bottom of the page at http://www.montereyhighdrama.com/multimedia/the-marriage-of-figaro-2010/ Thanks.

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. Don’t know about making it respect left padding, but this does work to make the entire set of thumbnails to float to the center. 

    .ngg-galleryoverview {
text-align:center;
}

.ngg-gallery-thumbnail-box {
float:none !important;
display:inline-block;
}

  2. Add these lines to your style.css and you should be all set:

    .ngg-galleryoverview { text-align: center; }
.ngg-gallery-list { display: inline-block; margin: 0; }
.ngg-gallery-list li { float: none; display: inline-block; }

  3. I had the same issue, but needed a solution that worked for all nextgen galleries dynamically, so I used media queries. BTW, I could not find any other solution and don’t know how to use the above code.

    I’m using Catalyst/Dynamik theme so I can set an exact page width and #container-wrap initial padding, but that didn’t do anything for centering the thumbnails or improve the mobile device look.

    These are my media queries, you would have to adjust for your thumbnail size, I used 220px wide.

    Final result: http://site01.profoliolive.com/fixed-grid/ Tested on iPad, iPhone and Android phone.

    @media (max-width: 1209px) {
  .ngg-galleryoverview { padding-left: 115px; }
}

@media (max-width: 1170px) {
  .ngg-galleryoverview { padding-left: 90px; }
}

@media (max-width: 1140px) {
  .ngg-galleryoverview { padding-left: 80px; }
}

@media (max-width: 1120px) {
  .ngg-galleryoverview { padding-left: 70px; }
}

@media (max-width: 1090px) {
  .ngg-galleryoverview { padding-left: 60px; }
}

@media (max-width: 1070px) {
  .ngg-galleryoverview { padding-left: 50px; }
}

@media (max-width: 1050px) {
  .ngg-galleryoverview { padding-left: 40px; }
}

@media (max-width: 1030px) {
  .ngg-galleryoverview { padding-left: 25px; }
}

@media (max-width: 1010px) {
  .ngg-galleryoverview { padding-left: 20px; }
}

@media (max-width: 990px) {
  .ngg-galleryoverview { padding-left: 10px; }
}

@media (max-width: 975px) {
  .ngg-galleryoverview { padding-left: 120px; }
}

@media (max-width: 900px) {
  .ngg-galleryoverview { padding-left: 80px; }
}

@media (max-width: 860px) {
  .ngg-galleryoverview { padding-left: 60px; }
}

@media (max-width: 830px) {
  .ngg-galleryoverview { padding-left: 40px; }
}

@media (max-width: 800px) {
  .ngg-galleryoverview { padding-left: 15px; }
}

@media (max-width: 760px) {
  .ngg-galleryoverview { padding-left: 0px; }
}

@media (max-width: 741px) {
  .ngg-galleryoverview { padding-left: 110px; }
}

@media (max-width: 660px) {
  .ngg-galleryoverview { padding-left: 80px; }
}

@media (max-width: 620px) {
  .ngg-galleryoverview { padding-left: 25px; }
}

@media (max-width: 507px) {
  .ngg-galleryoverview { padding-left: 20px; }
}