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, 10 months ago by GriffinGraffix.

ok thanks.. details in private comment.
I would prefer you send clear instructions once you figure it out as I have more modal windows to create and would like to know exactly what to do so I can repeat it.
I am making a backup in case site breaks during your fix.
Here’s an image of what I’d like the result to be.