WordPress.org

Forums

Customizr
Resizing the Slider Caption (20 posts)

  1. deitercat
    Member
    Posted 1 year ago #

    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.

  2. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Could you link to the site in question?

  3. deitercat
    Member
    Posted 1 year ago #

    wifss.ucdavis.edu

  4. deitercat
    Member
    Posted 1 year ago #

    Sorry -

  5. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Try:

    .carousel-caption {
     top: 10px;
    }
  6. deitercat
    Member
    Posted 1 year ago #

  7. deitercat
    Member
    Posted 1 year ago #

    Sorry Andrew, That did not work.

  8. Andrew
    Nuh uh moderator
    Posted 1 year ago #

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

  9. deitercat
    Member
    Posted 1 year ago #

    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?

  10. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Try:

    .carousel-image.slider-full img {
     max-width: initial;
    }
  11. Andrew
    Nuh uh moderator
    Posted 1 year ago #

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

  12. deitercat
    Member
    Posted 1 year ago #

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

    \

  13. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    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(?).

  14. deitercat
    Member
    Posted 1 year ago #

    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?

  15. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    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.

  16. deitercat
    Member
    Posted 1 year ago #

    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.

  17. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    That's okay, I took the time to write some explanation as to why.

  18. mdlvx
    Member
    Posted 1 year ago #

    Dear Friend? I want exactly that size of Slider from your website, because Customizr original Slider is too big. Question is Can you tell me please how to do it? which file do I have to edit? And what code Do I need? Thank you very much.

  19. rdellconsulting
    Member
    Posted 1 year ago #

    @mdlvx, Please start a new Post next time.

    Go to Customiz'it!>Front Page>Slider Options and uncheck the Full width slider checkbox.

  20. mdlvx
    Member
    Posted 1 year ago #

    Yes, thank you very much and I'm sorry. I will. Regards.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic