Easy slider caption below images

Hi Ismael

The code you supplied didn’t work… seeing as I’ve been playing around for 7 hrs on this, I came up with this

.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
background: none;
filter: alpha(opacity = 0);
background: rgba(0, 0, 0, 0);
display: inline-block;
margin: 10px 0 1px 0;
padding: 10px 0;
}

.avia-caption {
position: absolute;
z-index: 10;
bottom: -10px;
left: 0px;
padding: 10px 0;
color: #666666;
border-radius: 3px;
}

@media only screen and (max-width: 1400px){
.avia-caption { font-size: 85%; padding: 10px 0; margin-top: 10px;}
}

@media only screen and (max-width: 1300px){

.avia-caption { font-size: 75%; padding: 0; margin-top: 10px;}
}

@media only screen and (max-width: 850px){
.avia-caption { display: none; }
}

And also used the font size settings in each image… quite tedious as some have 1 line of text and some go up to 3 so figuring out the break points was tedious. Another thing I had to to was increase my images’ height to include 200px of white space at bottom of each. It wasn’t how I wanted to do it but seeing as time is pressing.. I did what I could to figure it out. I’m willing to try diff code if you can supply it.

I only have 2 days to launch so I can’t spend more time on this but if you can help me center my text, that would be awesome.

When I add text-align: center tp the avia-caption code it will work only when I have more than 1 line of text… if there’s only 1 line, it aligns left.. I wasn’t able to figure it out.

Thanks a bunch!

• This reply was modified 6 years, 11 months ago by GriffinGraffix.

I’m hoping to launch tomorrow… I’ll provide a link once launched.. thanks Ismael!

Hi Ismael,

The site is now live & you can find the issue on this page: http://purrproject.com/adopt/#virtual-adoption

The pics that are there now have extra blank space at bottom as it’s the only way I was able to display text below the images rather than on top. Once you give me the proper css, I’ll put back the pics without the extra white at bottom. I would also like text to be centered. As I explained above, the code I used for centering only worked when there were multiple lines of text.. with only 1 line, it was left.

I am also trying to reduce text size as screen gets smaller but have it still readable.

Thanks!