Resizing the Slider Caption

Could you link to the site in question?

wifss.ucdavis.edu

Sorry –

Try:

.carousel-caption {
 top: 10px;
}

Sorry Andrew, That did not work.

Looks like you’ll have to do things like resize text or reduce padding.
Are you okay with those changes?

I changed the padding from 5% to 3%, made caption area smaller, but still goes over slider when screen size is reduced. Is there a way to make it fixed, realizing this is liquid layout?

Try:

.carousel-image.slider-full img {
 max-width: initial;
}

You may want to do that within a media query for just mobile

I don’t think that did anything, let me show you what I have so far;
\
/* Adjust the Slider Height */
#customizr-slider.carousel .item {
height: 224px;
min-height: 224px;
line-height: 224px;
}

.carousel-image.slider-full img {
max-width: initial;
}

/* Adjust the caption background color */
.carousel-caption {
background: rgba(0, 0, 0, 0.5);
padding: 2%;
top: 10px;
}

\

I forget that initial only works on chrome, but you get the idea right? You need to override the 100% max-width style that’s applying to the slider image, otherwise it will resize on mobile and that’s not what you want(?).

That is correct, I want it to fit within the slider image. Is there anyway to set the exact height of the caption to match that of the slider?

Not unless you want to compromise the content within it.

The caption will be at different heights depending on people’s font style settings in their browsers, therefore you can’t rely on reducing styles like padding. If you set a fixed height the caption area will not resize when text increases, meaning text will be cut off.

As the slider is fluid it never has an absolute height, so you’d never know what height to set the caption in CSS.

It’s a fickle world, the internet. I suppose I can live with it for now, at least it seems to be improved on the ipad at least horizontally. I appreciate your time on this Andrew.