Photo Album Lister Thumbnails Distorted

Jan 8, 2015 6:21 pm

I was trying to setup just a basic photo album for my client and when it displays the thumbnails, they are all distorted. I've looked and looked in the stylesheet to see where to change this but I just cannot find it. Any suggestions?

Jan 8, 2015 6:40 pm

One thing I have tried in the Stylesheet.css on line 420: I added a width and a height which helped the proportions a little, but the image is still being stretched. :-(

.photoModule.moduleLister .gridItem span {display:block; width:200px; height:200px;}

Jan 9, 2015 3:00 pm

I took a look at your site and the stylesheets. Looks like the problem is that standard responsive code sets the max width of an image to 100% (framework.css line 11)

You can fix it one of two ways.

All images are the same height but get slightly cut off on the left hand side:

.photoModule.moduleLister img {
max-width: none;

Or you can set the height to auto and it will stop the images from getting stretched, but if the images aren't the exact same size the lister will not be perfectly uniform:

.photoModule.moduleLister img {

let me know if that is enough information to get your lister looking like you want.

Jan 9, 2015 8:56 pm

Thanks for finding where that was Kalis! Actually, I combined both of those and it really helped with the distorted proportions. I think that it looks a lot better now.