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.
http://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!
