Jump to content


Photo
- - - - -

How To Center Nextgen Gallery retaining responsiveness.


  • Please log in to reply
3 replies to this topic

#1 7tardis7

7tardis7

    Newbie

  • Members
  • 3 posts
  • Country: Country Flag

Posted 18 February 2013 - 05:12 PM

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.

 

Please Login or Register to see this Hidden Content

 

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.

Please Login or Register to see this Hidden Content

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!



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 13037 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 February 2013 - 05:51 PM

Hi,

 

This is a third party plugin, therefore you will need to contact the developer for assistance with CSS to style their plugin.



#3 7tardis7

7tardis7

    Newbie

  • Members
  • 3 posts
  • Country: Country Flag

Posted 18 February 2013 - 07:16 PM

Thanks for your time

So what responsive gallery does pagelines recommend?

I thought for sure there would be a built in gallery in pagelines.

I'm surpised that this simple feature isn't included? Or

is there a Pagelines add on I need to buy?

What am I missing here?



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 February 2013 - 10:57 PM

Hi,

 

We may have a few responsive galleries in our Store in the Sections area.