SM Layout: Align photo at top

leftquark · September 16, 2013

In SmugMug Layout I noticed that when landscape orientation photos are displayed they are not aligned at the top .. it's pushed down 16 pixels below where the thumbnails are (see screenshot below).

margin-top.jpg

I noticed the following in the code:

<div class="sm-tile-wrapper sm-tile-photo " style="margin-top: 16px; width: 669px;"

This is the code that is causing it to be pushed down 16pixels. If I go into developer mode in Chrome and set it to margin-top: 0px, it moves up and is properly aligned.

This is the interesting part ... if I go to a portrait orientation photo and look at the same code, SmugMug automatically sets its margin-top to be 0px.

It looks like SmugMug is trying to force landscape images to be pushed slightly down.

I added the following code to cancel it, but it doesn't seem to work. It does absolutely nothing and is basically ignored.

* Move the photo in SM Layout up slightly */
.sm-tile-wrapper .sm-tile-photo {
  margin-top: 0px !important;
}

Any thoughts on how to get rid of the 16 pixel gap?

Hikin' Mike · September 16, 2013

A shot in the dark, but how about using "-16px" instead of "0"?

leftquark · September 16, 2013

Hikin' Mike wrote: »

A shot in the dark, but how about using "-16px" instead of "0"?

It's not that the "margin-top: 0px" is wrong ... it's that the code I pasted has absolutely NO effect on moving it up or down. I'm not sure why. I believe I have the correct division names but I'm wondering if it's because SM stuck it in the "style=..." instead of in the CSS file.

If I use developer tools to set margin-top:16px to margin-top:0px, it comes out how I want (aligned at the top), but I can't get the CSS code to stick.

leftquark · September 18, 2013

I was able to figure it out ... annoyingly but I got it!

/* 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;
}

For whatever reason if you add a space after ".sm-tile-single" and ".sm-tiles-uncropped" it stops working. Guess combining it like that is required.

I also noticed that the landscape orientation photos previously didn't properly align with the right side of the page. Adding this code also makes them line up with the right side edge of the page!

SM Layout: Align photo at top

Comments