Recent addition of < and > around sm-gallery-image-totals breaks centering

beardedgit · August 22, 2013

Up until yesterday, before the sm-gallery-image-totals "x/N" became flanked by nav arrows, said total was nicely centred below the chosen gallery image (Gallery View, SmugMug Style, New SmugMug, XP, Firefox).

Now that the nav arrows have been added, this group of three elements (total and nav arrows) is off-centre, to me it looks like it has been set to centre between "Share" on the left and "Tools" on the right.

IMO, this group of three elements should be centred in the "sm-gallery-image-pagination" box.

Does that make sense? Tech-speak's not one of my strong points.

Oh, and why so much space between the nav arrows and the "x/N" total? The arrows have so much padding(?) that they're too far away from the total (again, IMO).

Example at http://beardedgit.smugmug.com/Fellwalking/Day-Walks/OM-Meet-Eskdale-September-2006/i-H8W38BN

Please re-centre this block of three elements. You could make the argument that it's only off-centre because I've added text to the buttons on the same line, but it really should be centred regardless of any secondary CSS text enhancements.

WinsomeWorks · August 22, 2013

beardedgit wrote: »

Up until yesterday, before the sm-gallery-image-totals "x/N" became flanked by nav arrows, said total was nicely centred below the chosen gallery image (Gallery View, SmugMug Style, New SmugMug, XP, Firefox).

Now that the nav arrows have been added, this group of three elements (total and nav arrows) is off-centre, to me it looks like it has been set to centre between "Share" on the left and "Tools" on the right.

IMO, this group of three elements should be centred in the "sm-gallery-image-pagination" box.

Does that make sense? Tech-speak's not one of my strong points.

Oh, and why so much space between the nav arrows and the "x/N" total? The arrows have so much padding(?) that they're too far away from the total (again, IMO).

Example at http://beardedgit.smugmug.com/Fellwalking/Day-Walks/OM-Meet-Eskdale-September-2006/i-3jxqjD3

Please re-centre this "block" of three elements. You could make the argument that they're only off-centre because I've added text to the buttons on the same line, but they really should be centred regardless of any secondary CSS text enhancements.

It's just so mind-boggling. Do they not have even one artistically-minded designer who takes one look at this stuff before any rollout? Whatever it was before was goofy too. But now we've got about 7/8" of vertical space being hogged by the stupid all-important looking image counter. Next a whole 1 1/8" (+) taken up with the caption, which is still divorced from the image by that 7/8" I mentioned earlier. Next, below that yet, is over an inch taken up with a comment box that should so obviously be moved to the other side (under the thumbs) that it makes me want to barf. All that stuff, hanging over on the right side weighing down that side and effectively losing over an inch & a half of vertical space that could be filled with large beautiful imagery such as what you've got there. Instead of being filled with bad design. And yes, I (& many others) said all this over a year ago when they asked for feedback. But seriously. Designers. Where???

beardedgit · August 22, 2013

WinsomeWorks wrote: »

It's just so mind-boggling. Do they not have even one artistically-minded designer who takes one look at this stuff before any rollout?

I am absolutely convinced that nobody at SM properly checks these "fixes" on all combinations of OS, browser and screen-res before release.

It's QA, not rocket-science.
That said, I am picking up a faint aroma of Hubble Mirror Fiasco.

beardedgit · August 22, 2013

Ooh, I just noticed something odd in your reply, WinsomeWorks. The URL reported in the quote box is different to the one I put in the OP.

Chalk up one more glitch!

phaserbeam · August 22, 2013

On my SM galleries this block is centered. But i have a share icon and those three tool icons do not have any text like on your page.

beardedgit · August 22, 2013

phaserbeam wrote: »

On my SM galleries this block is centered.

Maybe you see yours centred but I don't.

Here's how my setup sees your gallery:

It's a screen resolution thing, I think. I'd guess that it looked OK on the screen of whoever edited the code, but it wasn't checked at other screen resolutions. A quick fix that will end up taking more time to correct than it would have taken to do it properly and test it properly in the first case.

Andy · August 22, 2013

looks perfectly centered to me
moonriverphotography.com/Galleries/Galapagos/

But you've added words to some of the icons (like, exif info, share), via your own customization... so that is what's probably throwing off the centering.

beardedgit · August 22, 2013

Andy wrote: »

<img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" > looks perfectly centered to me
moonriverphotography.com/Galleries/Galapagos/

But you've added words to some of the icons (like, exif info, share), via your own customization... so that is what's probably throwing off the centering.

I've not added icon labels to phaserbeam's site and that's off-centre to me, phaserbeam does not show a Share icon. It does appear centred on yours, but that's because yours doesn't show a Download icon. Go figure.

Like I said it, if it was centred in the "sm-gallery-image-pagination" box it wouldn't matter.

I added my icon labels days ago and they didn't throw the counter off-centre at all, it was OK until the < and > were added.

beardedgit · August 22, 2013

OK, I temporarily ditched the icon label code, closed everything, cleared the cache, rebooted, reloaded a gallery and did another screenshot.

Guess what...

It's still off-centre:

phaserbeam · August 22, 2013

Ah i see... i was logged in and there i got that share button that does not appear when not logged in. Yes, then it is off-center.

beardedgit · August 22, 2013

phaserbeam wrote: »

Ah i see... i was logged in and there i got that share button that does not appear when not logged in. Yes, then it is off-center.

Thanks for checking, phaserbeam

southeasternphotography · August 22, 2013

And why is the navigation below the image. After looking at umpteen posts asking for the navs to go back to the top, I did not see ANYONE arguing to keep them at the bottom. Keep all the Click stuff above the image and let our descriptions be the first thing under the image again....please. Also, give us selectable icons for how the search icons look. I'm sure now that the navs are back, someone will provide custom programming to change the look - unless this is one of those "untouchable" locked areas. Not being able to adjust the centering gives a non-professional look. Personally, if that stuff was moved up top and was right justified, I would be fine with that. But someone else will want the upper line centered, too. So allow us to get the look WE want. Remember advertising fully customizable to the look you want?

leftquark · September 18, 2013

I ran into similar issues but wrote some CSS code to fix it. I started another thread because I didn't realize you had this one:
http://www.dgrin.com/showthread.php?t=240882

The following code properly centers the image pagination under the photo. SmugMug wrote their code wrong, this is what they should have done (but you can do and override their incorrect code):

/* Properly center the image pagination */
.sm-user-ui .sm-gallery-smugmug .sm-gallery-image-pagination {
  margin-left: auto;
  margin-right: auto;
  width: 50%; 
/* can change width to 30% or 40% if it doesn't look right on your layout */
}

southeasternphotography · September 18, 2013

Thanks Aaron! Works great! Another issue down!

Recent addition of < and > around sm-gallery-image-totals breaks centering

Comments