longer slide title text is not wrapping

Hi, you need to add a line height to the caption:

.meteor-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: black;
margin: 0;
padding: 18px 0;
position: absolute;
text-align: center;
width: 100%;
line-height: 18px;
}

Thanks, that did it!! It wraps nicely now.

One more problem, though: I changed the text alignment from centered to the default of left-aligned – and changed the padding to 18px all around to keep the text from bumping into the sides.

.meteor-slides p {
background: transparent url(‘images/title-bg.png’) repeat top left;
bottom: 0;
left: 0;
color: black;
margin: 0;
padding: 18px;
position: absolute;
width: 100%;
line-height: 18px;
}

For some reason, the padding works left, top, and bottom, but not on the right. What’s the problem?

Of course, I want to keep it responsive.

https://bantamdesigns.com/wp/meteor-test/

The problem is that the width is 100%, and the left and right padding add to that to make it more than 100%. Change the caption width to “524px” so that it all adds up to equal the slideshow width and it should work.

That didn’t work. It became not responsive – smaller format completely cut text off. Maybe I should try putting a div around the <p> code in the php file, then defining the div and the p separately. Or would ems work better than pixels?

Ah, didn’t know it was responsive, in that case you need to use percentages for all the values so it adds up to 100%.

.meteor-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: black;
margin: 0;
padding: 2%;
position: absolute;
text-align: center;
width: 96%;
line-height: 18px;
}

Thanks. That completely did it. I’m new to responsive design but am trying start using it exclusively. That’s why I chose your plugin. Your support response is excellent too.

No problem, glad to help!