Responsive problem with NextGen thumbnails

nhall2
(@nhall2)

13 years, 1 month ago

I’m having trouble getting the thumbmails generated by my NextGen plugin to display in a responsive manner. No matter what I do, my galleries display in 6 columns. Also, when I resize the browser window or view it on a mobile device, the thumbnails are squeezed together and the width is reduced (but not the height). I would greatly appreciate any help I can get with this. I’d love the thumbnails to retain their aspect ratio (100×75) and I’d also like to get the columns to reduce based on the width of the browser. I’m using the free “2011” theme. Here is a link to one of the galleries: http://bit.ly/16aadwU

Thanks in advance for any guidance you can give me!!!!

http://wordpress.org/extend/plugins/nextgen-gallery/

Viewing 4 replies - 1 through 4 (of 4 total)

biziclop
(@biziclop)

13 years, 1 month ago

Hi, go to NGGallery’s Gallery settings tab where you will find a “Number of columns” field, set that to zero.

Also, you should remove the style="width:25%;" from the .ngg-gallery-thumbnail-box elements.

Thread Starter nhall2
(@nhall2)

13 years ago

I removed the width style from the .ngg-gallery-thumbnail-box element, but it had no effect. I have the number of columns field set to 4 so that it doesn’t look as bad on a mobile device when viewed. If I set it to 0, it shows 6 images (like the desktop browser) and squeezes them so they are distorted. The site template is responsive, but the ngg gallery isn’t behaving in a responsive manner. I’m stumped.

Thread Starter nhall2
(@nhall2)

13 years ago

If you drag your desktop browser handles to make the window smaller (like a mobile device) you’ll see what I mean. The images are just squeezed together and distorted. There must be a simple fix for this, but I don’t know what it is.
biziclop
(@biziclop)

13 years ago
Your code looks like this (verify it in your browser’s inspector:
```
<div id="ngg-image-1" class="ngg-gallery-thumbnail-box" style="width:25%;">…
<div id="ngg-image-2" class="ngg-gallery-thumbnail-box" style="width:25%;">…
<div id="ngg-image-3" class="ngg-gallery-thumbnail-box" style="width:25%;">…
<div id="ngg-image-4" class="ngg-gallery-thumbnail-box" style="width:25%;">…
<br style="clear: both" />
```
If you look into nextgen-gallery/view/gallery.php you will see what creates the line breaks:
```
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>
```
There is also a style="width:25%;" at every line. It is from this line:

<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >

This is probably set at Gallery / Options / Effects at the admin dashboard as a custom code. I hope you realize that 25% means 4 columns 🙂

Image squeezing is caused by this rule in your css:
```
.entry-content img, .comment-content img, .widget img {
max-width: 97.5%;
}
```

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Responsive problem with NextGen thumbnails’ is closed to new replies.