How to wrap text in picture caption

Motorider · August 22, 2013

First, as a newbie, I would like to say thanks to SM support for their friendly & relatively fast responses to some of my initial questions during such a busy time, but also to those of you fellow users who voluntarily & regularly assist others by sharing your vast experience with this software!

I'm finally starting to get close to finishing my non-photo business' website using the new SM design. But I need a little help figuring out how to get the text to wrap inside a 'Single Photo' caption box. On my home page I have 3 vertical photos that link to other SM pages/galleries via URL when clicked. I would like to have a short paragraph (which comes from the photo's caption) describing each one of these areas of my business. I believe using the photo's caption box allows it to stretch properly on various screen sizes (where adding a text block below the images does not).

I have intentionally shifted the caption boxes down & to the left to give it a unique look, but no matter what CSS code I use I cannot get the text to wrap inside that box (as shown in my screen shot below). Here is the CSS code I am using:

/* alter caption block size & text alignment */
.sm-tile-info{
max-width:250px;
height:100px;
text-align:center;
}

/* alter caption block location */
.sm-tile-content{
padding-bottom:15%;
}

Any ideas?
Thank you

moiraine · August 22, 2013

have you tried to modify the p tag?

.sm-tiles-info-over .sm-tile-info p {
    overflow: visible;
    text-overflow: inherit;
    white-space: normal;


}

not sure without looking further whether or not you'll need a stronger rule to override SmugMug's default behavior, but those styles should do the trick

Motorider · August 22, 2013

Aside from the 'text-overflow' line (which turned red so I removed it), that did the trick moiraine. Thank you!!!

BTW, in case I actually figure out what this stuff means someday; what is the 'p' tag anyway? How can I learn more about this kinda stuff (other than the tinkering I'm doing)?

Here's a shot of the now FIXED caption block text.

moiraine · August 22, 2013

The 'p' tag stands for "paragraph", and is often used to display text.

In this case, SmugMug is wrapping the caption inside a

tag, and if you inspect it through anything like chrome's inspector, or firebug, you can see the styles that were applied to create the ellipses.

The fix I provided essentially overrode the styles that were being used to generate the dots and keep the caption to one line.

mbonocore · August 22, 2013

Moved over to the customization forum

Motorider · August 23, 2013

Thanks for trying to explain moiraine. I use Firefox & I've taken a look at this page with firebug, but it's too complicated for me. Without firebug, it looks like I can just right click on my page and choose 'inspect element' to see some of this info, but again I don't know where or how you found the stuff you gave me. But it's fixed now & I'm grateful for your help.

Cheers

How to wrap text in picture caption

Comments