Vertical space between thumbnails

James_F

Smugmug design, Smugmug gallery style: See the snapshot of thumbnails. How can I reduce the amount of space between rows of thumbnails? Please note that I do have some portrait orientation thumbnails in some galleries. So I do need to preserve some space between rows of thumbnails when a portrait orientation image is present.

James_F

James_F wrote: »

Smugmug design, Smugmug gallery style: See the snapshot of thumbnails. How can I reduce the amount of space between rows of thumbnails? Please note that I do have some portrait orientation thumbnails in some galleries. So I do need to preserve some space between rows of thumbnails when a portrait orientation image is present.

Anyone with any ideas?

aschendel

My thumbnails are nice and tight in Sierra and in the Smugmug theme too (I switched over to confirm). I'd guess you have some customized CSS that is interfering / causing this... or maybe something you removed by accident.

Andy

James_F

aschendel wrote: »

My thumbnails are nice and tight in Sierra and in the Smugmug theme too (I switched over to confirm). I'd guess you have some customized CSS that is interfering / causing this... or maybe something you removed by accident.

Andy

Andy: Thank you for your response. The only CSS coding for Smugmug gallery style thumbnails I have done is to round the corners and to close the horizontal space between the thumbnails to 3pxs. I don't know CSS coding (I copied the aforementioned from other posts and they work fine). But I don't know how to close the vertical distance between rows of thumbnails. That's the reason for my post.

aschendel

No problem, I dug pretty hard into your site and couldn't find the CSS that was causing it either. If you go through the CSS you did add for rounded corners, etc, you might find something to do with either margins or heights. Or, it might be a trial and error approach, you could remove a section of CSS at a time (save it off into Notepad or some other text editor) and see if you can get all the way back to the base gallery look. You can always change site design and start another version too, building that part of the CSS up until you see the spacing break.

Andy

pilotdave

James_F wrote: »

Smugmug design, Smugmug gallery style: See the snapshot of thumbnails. How can I reduce the amount of space between rows of thumbnails? Please note that I do have some portrait orientation thumbnails in some galleries. So I do need to preserve some space between rows of thumbnails when a portrait orientation image is present.

I have the same issue. I switched one gallery to square thumbs and that fixes it. I don't want square thumbs but it does look better than this.

Dave

James_F

Think I may have found a way to close the vertical distance between rows of thumbnails in new Smugmug Gallery style and NOT use square thumbnails. I added the following CSS:

.sm-gallery-smugmug .sm-gallery-tiles .sm-tile {margin:-10px 3px;}

Notes: The first margin number - note it's a negative value - subtracts from the default space above and below a thumbnail by 10 pixels. You might tweak that number. Be careful; if you have odd shaped images or verticals (portrait orientation), the thumbnails may overlap and you'll have to change the first number. I did, I left mine at -3 or something for the time being. The second number specifies the space left and right between the thumbnails. New issue: now there's wasted space under the last row of thumbnails (if there is more than one page of images in a gallery.)

I not satisfied with this whole deal yet. Bottom line: I need to revise many of my images to a more consistent aspect ratio. But at least it's a start. Wouldn't it be nice if SmugMug made all of this easier for us users?

aschendel

James_F wrote: »

.sm-gallery-smugmug .sm-gallery-tiles .sm-tile {margin:-10px 3px;}

Notes: The first margin number - note it's a negative value - subtracts from the default space above and below a thumbnail by 10 pixels. ...<snip /> ... The second number specifies the space left and right between the thumbnails.

The full syntax for margin is described here (and in a variety of other places online): http://www.w3schools.com/css/css_margin.asp

Andy