I’m using CSS to give the photos on my travel site a “polaroid” look but in doing this I’ve found that long captions overlap the left and right edges of the centred image boundary and when they go to two lines they also overlap the bottom border.
What can I do to make them behave correctly? See http://www.asiantraveltips.com/thailand/khao-san-road-bangkok/ (second image on page) as a good example of the problem.
This is the CSS I’m using:
.wp-caption img, .post .featured-image img {
border-radius: 2px;
background: #eee;
box-shadow: 0 0 3px #333;
border: solid 1px #F4EFEF;
padding: 5px 5px 40px;
}
.wp-caption .wp-caption-text {
margin: .8075rem 0;
}
.wp-caption-text {
position: relative;
bottom: 50px;
text-align: center;
width: 100%;
}
