More room on the right for Title, caption and keyword in SM and lightbox view.

Erick L

Found it for the SM view, still looking for lightbox view!


Hi,

Is there a way to let the Title, caption and keyword go all the way to the right instead of breaking line somewhere around 6/10 of the photo width?

This is the right side, or main image, of Smugmug view. See all the space wasted on the right and unnecessary break line. Same happens in the lightbox.



Thank you.

Jtring

Maybe this can aim you in a useful direction. I've got several CSS mods, including the snippet below that lets the title, caption, and keywords expand to full width. You may not need or want the second block: it just adjusts spacing to work better with the font size and other layout choices I have in place. No guarantees this will work, but if not, perhaps you can use it as a basis for writing you own code. See this in action on my site (see my sig below) and see a full list of my CSS mods here. By the way, nice marmot ... friendlier than mine.

/* CAPTION AND FOOTER SPACING/ALIGNMENT:
Sets the lightbox title, caption, and keyword text not to wrap until it runs out of space.
Adjusts spacing so no scrollbar is needed with two lines of text
and provides a nice amount of space between the caption and icon bar.
With inline arrangement of the caption and the keyword, it appears only
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info
is really needed, but the others could be in other cases
Latest version of this adjustment 2015-03-31, J. T. Ringland.*/
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info,
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > div,
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > p,
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, 
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, 
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords {
    Max-width:none;
}
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
    padding: 10px 16px 5px;
    margin-right: 220px;
    }