Help me please! I've wasted a whole weekend trying to figure this out.
In the end I still haven't found the solution.
It's pretty simple and I don't understand why it's so complicated.
But all I want to do is center my Nextgen gallery on the page, while retaining it's responsive properties.
Here's the page in question.
As you can see it's a off to the left. But what is nice is that when you view it on mobile each thumbnail goes under the other in one column.
I've tried all sorts of code.
Adding this
.ngg-galleryoverview
{ width: 600px; margin: auto; }
This css did center the gallery on the page. But then it loses the mobile responsiveness.
I've also tried many things like putting it in a table inline..
<div align="center">
<tableborder="0" cellspacing="0" cellpadding="0"style="width: 90%; padding-top: 0px; padding-right: 0px; padding-left:
0px; padding-bottom: 0px; border-top: 0px; border-right: 0px; border-bottom:
0px; border-left: 0px" align="center" width="90%">
<tr>
<td
align="center">[nggallery id=1]</td>
</tr>
</table>
</div>
(I've set up this page with the "table" code...check on mobile.
This seems like it works on desktop! Yes! I want 2 columns. But then when I look at it in mobile. It's still out of wack.
When I view on chrome moblie it collapses to one column..but cuts off the right side of the thumbnails and moves
it up a few px to be flush with the menu.
When it is viewed in Firefox mobile...same thing but the thumbnails are larger and cut off screen.
Tried most all the code I've found on the net.
This has been driving me crazy!
If it's working pretty good on desktop. Can't I just style the mobile CSS to "straighten" things up?
What would be the code for that? Where to put it? (custom code?)
I hoped buying pagelines would help me knock out simple websites like this.
Ugh! please help! Am I missing something simple?
Thanks in advance!











