Search page results not centered

LPC · December 22, 2013

Whenever I do a search, the results are not centered and there is always a noticeably bigger space on the right hand side. It doesn't matter if I view this on my widescreen monitor or my 5:4 square monitor and it doesn't matter how I re-size either window - it is always off to the left.

I've picked several other SM sites at random and it is the same there.

Can this be fixed?

rnrjosh · December 22, 2013

There's not a way to customize the appearance of the search results screen at this time, to my knowledge. I'm sorry I don't have a better answer for you! The results do justify left, and will fill your screen with as many thumbs will fit (so any margins you set at the Entire Site level do influence how many thumbs will fit), and then wrapping after that. EDIT: This can also be influenced by your browser zoom, so make sure you are viewing at 100% zoom by holding CTRL+0 (PC) or Command+0 (Mac) to reset to the default zoom level.

beardedgit · December 22, 2013

LPC wrote: »

Whenever I do a search, the results are not centered and there is always a noticeably bigger space on the right hand side. It doesn't matter if I view this on my widescreen monitor or my 5:4 square monitor and it doesn't matter how I re-size either window - it is always off to the left.

I've picked several other SM sites at random and it is the same there.

Can this be fixed?

Contrary to the previous post, it can be customised, if not fixed...
Do a search and when the results pop up hit Customize > Customize Site > Just This Page > Layout and fiddle with the settings. Try "Stretchy" and body width "auto" and then play with side margins, I found 129px looks OK to me and prevents the "hover" images from going offscreen (the "hover" images are double the width of the tiles if the originals are landscape format). Like Josh says, zoom level can be a factor, as can monitor size.

It's quite easily to centre the element that contains the tiles, but centring the tiles within that element is a different kettle of fish!

Example: http://beardedgit.smugmug.com/search#q=crag

LPC · December 22, 2013

beardedgit wrote: »

Contrary to the previous post, it can be customised, if not fixed...
Do a search and when the results pop up hit Customize > Customize Site > Just This Page > Layout and fiddle with the settings. Try "Stretchy" and body width "auto" and then play with side margins, I found 129px looks OK to me and prevents the "hover" images from going offscreen (the "hover" images are double the width of the tiles if the originals are landscape format). Like Josh says, zoom level can be a factor, as can monitor size.

Example: http://beardedgit.smugmug.com/search#q=crag

I'm afraid yours looks the same with the big right margin no matter how I zoom or which monitor I look at it on -

I tried just customizing the search results page as I've been making minor improvements all over my site this weekend (thanks to the new 'Background' option) and this is the only area I can't fix which is a shame.

edit - having said that, fiddling again with the margins in Layout does seem to have improved it on my widescreen monitor (but not my square one). Thanks. It would be much better if it was centered by default though like every other content block.

beardedgit · December 22, 2013

LPC wrote: »

I'm afraid yours looks the same with the big right margin no matter how I zoom or which monitor I look at it on

Indeed it does. Like I said, it can be customised, if not fixed.

As per my late edit, it's quite easily to centre the element that contains the tiles, but centring the tiles within that element is a different kettle of fish. I doubt that it's impossible, though.

LPC · December 22, 2013

beardedgit wrote: »

Indeed it does. Like I said, it can be customised, if not fixed.

As per my late edit, it's quite easily to centre the element that contains the tiles, but centring the tiles within that element is a different kettle of fish. I doubt that it's impossible, though.

Ah, gotcha, thanks

beardedgit · December 22, 2013

LPC wrote: »

Ah, gotcha, thanks

Got a link to your site so I can take a peek, LPC?

beardedgit · December 22, 2013

beardedgit wrote: »

... " and then play with side margins, I found 129px looks OK to me...

All change!

Margins now 107px to work better with new border/spacing:

.sm-search-tile {
  margin:4px 8px 4px 0px;
  border: 1px solid black!important
}

LPC · December 22, 2013

beardedgit wrote: »

Got a link to your site so I can take a peek, LPC?

Here we go - http://www.laurencecounter.com/ - (as you'll see, it's mainly full of bugs

)

beardedgit · December 22, 2013

LPC wrote: »

Here we go - http://www.laurencecounter.com/ - (as you'll see, it's mainly full of bugs )

- you'd have liked my old friend Russell Coope, what he didn't know about bugs wasn't worth knowing.

Your search results page looks good to me on my 1280x800 monitor, and I really like its background image.

Thanks for the link

LPC · December 22, 2013

beardedgit wrote: »

- you'd have liked my old friend Russell Coope, what he didn't know about bugs wasn't worth knowing.

Your search results page looks good to me on my 1280x800 monitor, and I really like its background image.

Thanks for the link

Thanks. I just thought looking out to sea would be apt for 'Search'

I'll look up Mr Cooper, I can always use another bug reference.

phaserbeam · December 24, 2013

Thanks... didn't know that i could also customize the search results page.

I think i got it centered... makes photos on the left look better (some bits still get off the screen).
Maybe someone can check on other browsers/OS (FF/Linux here).

Not sure if i should center the info text also...

Markus

beardedgit · December 24, 2013

beardedgit wrote: »

As per my late edit, it's quite easily to centre the element that contains the tiles, but centring the tiles within that element is a different kettle of fish. I doubt that it's impossible, though.

Turned out to be easier after a beer...

.sm-search-tiles {
    text-align: center;
}

Markus, I'll post a screenshot of yours from mine, stay tuned...

beardedgit · December 24, 2013

Here you go, looks good to me:

Firefox 26.0 on XP SP3, 1280x800 monitor.

phaserbeam · December 24, 2013

beardedgit wrote: »
Turned out to be easier after a beer...
.sm-search-tiles {
    text-align: center;
}

Thats what i used to do also... text-align:center;
Thanks for testing

Here is my custom CSS, i changed some more things...

.sm-search-tile {
    margin:1px 1px 0px 0px;
    border: none!important
}
.sm-search-tile.sm-search-tile-album {
    background:rgba(10,10,10,0.2)!important;
}
.sm-search-tile.sm-search-tile-image {
    background:rgba(10,10,10,0.2)!important;
}
.sm-search-tile-info {
    background:rgba(20,20,20,0.8)!important;
}
.sm-search {
    text-align:center;
}
.sm-form-field-select {
    color:black!important;
}
.sm-search-tile-info-content {
    text-align:left;
}

LPC · December 24, 2013

Heavens!

I added a css block on the search results page with just

.sm-search-tiles {
text-align: center;
}

.sm-search-tile {
margin:1px 1px 0px 0px;
border: none!important
}

and my tiles now seem to center no matter how I re-size the window!

Thank you!!!

LPC · December 24, 2013

Phaserbeam - how did you get rid of the 'Sort by' field?

phaserbeam · December 24, 2013

LPC wrote: »

Phaserbeam - how did you get rid of the 'Sort by' field?

try this:

.sm-search .sm-search-sort {
display:none;
}

And i also made the "hover/mouse-over" effect different to the default look.

.sm-search .yui3-widget-bd {
    border: none;
    box-shadow:rgba(10, 14, 18, 0.95) 10px 10px 24px 8px;
    padding:10px 11px 11px 10px;
    margin:-10px 0px 0px -10px;
    background:rgba(80, 84, 88, 0.90);
}

LPC · December 24, 2013

Excellent, thank you!

beardedgit · December 24, 2013

LPC wrote: »

Heavens!

I added a css block on the search results page with just

.sm-search-tiles {
text-align: center;
}

.sm-search-tile {
margin:1px 1px 0px 0px;
border: none!important
}

and my tiles now seem to center no matter how I re-size the window!

Thank you!!!

You can be the lucky guy who tells Josh

LPC · December 24, 2013

beardedgit wrote: »

You can be the lucky guy who tells Josh

I tried to change the title to 'Fixed' but I don't think it will let me

beardedgit · December 24, 2013

LPC wrote: »

I tried to change the title to 'Fixed' but I don't think it will let me

Steady on, it needs testing properly before that! You don't want to fall into the same "it works for me so I'll assume that it works for everybody" trap that SM fall into on a regular basis

LPC · December 24, 2013

Well, it works for you, for me and for phaserbeam. Three people is probably over generous for a Smugmug beta team so I'm happy to put my lunch money on it

(there will then be utter silence from me when I am proved wrong).

phaserbeam · December 24, 2013

Center search results seem to work on unsupported browser also (Konqueror/Linux). The only thing i also want to have centered is the search box, but it is pinned to the left.

LPC · December 24, 2013

phaserbeam wrote: »

Center search results seem to work on unsupported browser also (Konqueror/Linux). The only thing i also want to have centered is the search box, but it is pinned to the left.

Yes, that would be the icing on the cake

phaserbeam · December 24, 2013

LPC wrote: »

Yes, that would be the icing on the cake

If you want to give it a try... just added this to my site and it seem to work:

.sm-search-input {
width:auto;
}
.sm-search-options {
width:auto;
}

In the layout-section i set the side-margins to 100px so photos do not always get cut off on the left/right edge of the screen. Still not perfect but looks better then before.

denisegoldberg · December 24, 2013

phaserbeam wrote: »

The only thing i also want to have centered is the search box, but it is pinned to the left.

I just edited the search box (with the wrench icon) and found that there is a choice for center alignment. Does that not work for you? Or did I misunderstand what you are asking for?

--- Denise

phaserbeam · December 24, 2013

denisegoldberg wrote: »

I just edited the search box (with the wrench icon) and found that there is a choice for center alignment. Does that not work for you? Or did I misunderstand what you are asking for?

Its the seach box on the results page. On the search page i used your suggestion to center the box, but that does not work for me on the results page. I used the CSS above to "fix" that

denisegoldberg · December 24, 2013

phaserbeam wrote: »

Its the seach box on the results page. On the search page i used your suggestion to center the box, but that does not work for me on the results page. I used the CSS above to "fix" that

Ah, thanks for the clarification.

--- Denise

phaserbeam · December 24, 2013

If someone selects one of the options "photos / video... etc" the input box goes to the left again, so i tweaked the code a bit:

.sm-search-input {
  width:auto[COLOR=Red]!important[/COLOR];
}
.sm-search-options {
  width:auto;
}

LPC · December 24, 2013

phaserbeam wrote: »
If someone selects one of the options "photos / video... etc" the input box goes to the left again, so i tweaked the code a bit:
.sm-search-input {
  width:auto[COLOR=Red]!important[/COLOR];
}
.sm-search-options {
  width:auto;
}

Hmmm, thank you but this doesn't work for me for some reason, it stays to the left no matter what.

Search page results not centered

Comments