Captions

markn-c's Avatar

markn-c

06 Jul, 2014 12:41 PM

I am using the royalslider.css and have included the .rsGCaption class. in order to include html rich titles and descriptions. This works ok but ideally, I would like the caption to center at the bottom of the image which is hard to do as it does not respond to the media queries and looks ridiculous on mobile size. I've to'd and fro'd with this for some time and feel a little frayed at the edges with trying. Does anyone have any idea how I can make this work.
Specifically, I am only using the caption on the first image in the slider for now as I want to get it right before I add the rest. The url for the page it is sort-of working on is http://www.designmark.co.uk/t4f/portfolio.html.
Really would appreciate some help with this. Thanks.

  1. Support Staff 1 Posted by Dmitry Semenov on 06 Jul, 2014 05:17 PM

    Dmitry Semenov's Avatar

    Hi,

    First of, the class should be rsCaption - http://dimsemenov.com/plugins/royal-slider/documentation/#global-ca... (rsGCaption is class of caption that is generated).

    To put it below the image, you may just add padding-bottom to .rsOverflow and use negative margin for rsGCaption element. Or remove default image scaling and centering for images, and adjust its size manually via CSS how you want, http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

    Dmitry

  2. 2 Posted by Steve on 01 Feb, 2018 11:02 AM

    Steve's Avatar

    Yay! Figured it out using a mostly CSS solution!

    I nudged the bottom of the containers down by 43px, the nudged the arrows and nav up by 57px, and made sure the caption was static not absolute:

    .slider-post-caption {
    position: static;
    left: inherit;
    top: inherit;
    bottom: inherit;
    width: inherit;
    margin-top: -6px;
    padding-top: 4px;
    }
    .rsOverflow,
    .rsContainer,
    ul.royalSlider {
    padding-bottom: 43px;
    }
    .royalSlider.rsShor.rsHor .rsArrowRight,
    .royalSlider.rsShor.rsHor .rsArrowLeft,
    .royalSlider.rsShor .rsBullets{
    bottom: 57px;
    }

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac