Support » Theme: Customizr » Resizing the Slider Caption

  • I recently changed the size of the slider and now it appears I need to resize the caption to fit, particularly on smaller screens where the caption actually runs over the bottom of the slider.

Viewing 15 replies - 1 through 15 (of 19 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Could you link to the site in question?

    wifss.ucdavis.edu

    Sorry –

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try:

    .carousel-caption {
     top: 10px;
    }

    Sorry Andrew, That did not work.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try:

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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;
    }

    \

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Resizing the Slider Caption’ is closed to new replies.