Smugmug Galleries- How to Align Thumbs and Picture

smmokan · October 3, 2013

There has to be a simple solution to this.... if you look in my galleries (all Smugmug theme), there are various alignments between the top of the thumbnails and the top of the chosen image. It's different for almost every one!

http://smmokan.smugmug.com/Portraits/Childrens-Portraits

http://smmokan.smugmug.com/Portraits/Senior-Pictures

http://smmokan.smugmug.com/Portfolio/Skiing-Photography

How can I make sure the tops of the thumbs and the top of the image is aligned? It looks very unprofessional to have such a difference at the top of the page. Thanks.

Hikin' Mike · October 3, 2013

They look fine to me. All three examples look the same on my 1024 x 768 monitor.

smmokan · October 3, 2013

I'm looking on my laptop (and an iPad) and none of the galleries are aligned.

Edit- I also looked on my 1680x1050 monitor and they're offset as well.

ChancyRat · October 3, 2013

smmokan wrote: »

There has to be a simple solution to this.... if you look in my galleries (all Smugmug theme), there are various alignments between the top of the thumbnails and the top of the chosen image. It's different for almost every one!

http://smmokan.smugmug.com/Portraits/Childrens-Portraits

http://smmokan.smugmug.com/Portraits/Senior-Pictures

http://smmokan.smugmug.com/Portfolio/Skiing-Photography

How can I make sure the tops of the thumbs and the top of the image is aligned? It looks very unprofessional to have such a difference at the top of the page. Thanks.

Oh I see what you mean, you mean the top of the top line of the top row of thumbnails, aligned to the top line of the large photo on the right, when you compare the 3 galleries (and more specifically when you compare the 3 photos that show when you first click the URLs). It took me several back and forth clicks between the URLS to see anything at all that is different. You have a very sharp eye to see that. I think the reason is because in the Skiing gallery, you have a gallery description. It's that that pushes down the block of thumbnails in that gallery, where the other two galleries don't have a gallery description.

Honestly it doesn't look unprofessional to me. Someone visiting different galleries is not imo going to notice anything different.

In fact that top alignment between the two (thumbnails group and right photo) changes again depending on the photo that is chosen to view on the right. I see that the format does not force the top line of the photo on the right, to be at it's highest point always (vertically). Yet even as I scroll through photos and that changes, I don't notice these variations. I'm focused on the snow photos and thinking how happy I am living in northern California.

I wonder what would happen if you added several paragraphs of gallery description. What happens then to the alignment?

leftquark · October 3, 2013

smmokan wrote: »

There has to be a simple solution to this.... if you look in my galleries (all Smugmug theme), there are various alignments between the top of the thumbnails and the top of the chosen image. It's different for almost every one!

http://smmokan.smugmug.com/Portraits/Childrens-Portraits

http://smmokan.smugmug.com/Portraits/Senior-Pictures

http://smmokan.smugmug.com/Portfolio/Skiing-Photography

How can I make sure the tops of the thumbs and the top of the image is aligned? It looks very unprofessional to have such a difference at the top of the page. Thanks.

I ran into the same issue on my site. It appears that, for whatever unknown reason, SmugMug decides that photos in portrait orientation and landscape orientation should be displayed differently on the SmugMug layout. For portrait orientation photos they leave the margin at the top at 0. For landscape orientation photos they push it down 12 pixels or so. I added the following code to line it up.

You can see an example here: http://www.aaronmphotography.com/Photography/Recent/i-z4B32Xg

Add this CSS to your theme's Advanced CSS section:

/* Ensure the top of the selected photo is aligned with the thubmanils */
.sm-tile-single.sm-tiles-uncropped .sm-tile-wrapper {
  margin-top: -1px !important;
}

This overrides the code that smugmug adds to push it down and pulls it back up.

smmokan · October 4, 2013

Leftquark- perfect, that did the trick. Thank you for the help!

Also- great site, I really love the landscape shots you have!

Smugmug Galleries- How to Align Thumbs and Picture

Comments