How to wrap text in picture caption

Motorider

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

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

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

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

Moved over to the customization forum

Motorider

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