Full width Slider Banner

claire's Avatar


29 Nov, 2017 09:22 AM

I can get the slider to show full width and at my suggested height, but struggling how to keep the image at the same height when responsive and for the image to align right. I'm also am struggling to get the infoBlock to go into a block undeneath when in mobile mode. Any assistance would be greatfully recieved. Mnay Thank

  1. Support Staff 1 Posted by Dmytro Semenov on 29 Nov, 2017 03:53 PM

    Dmytro Semenov's Avatar


    To move text below the image you'll either need to use template with auto-height (such as this one http://dimsemenov.com/plugins/royal-slider/content-slider/ ), or use Global Caption (which is not part of the slide and thus can be moved however you wish) http://dimsemenov.com/plugins/royal-slider/documentation/#global-ca...

    Regarding your "height" issue - I'll need a link to the page with the issue to tell you what might be wrong.

  2. 2 Posted by claire on 04 Dec, 2017 11:25 AM

    claire's Avatar

    Hello, the link to my test page is https://www.blakedesigns.co.uk/slider/slider2.html

    What I'm struggling to keep the image in proportion, its being squeezed into the slider dimensions rather than hiding the overflow of the image.

    I will take a look at the Global Caption option, as what I would like the text to do is position itself underneath the image on mobile view.

    Thanks in advance for you help.

  3. 3 Posted by claire on 04 Dec, 2017 02:15 PM

    claire's Avatar

    I've fixed the image proportion, its just moving the content underneath the picture when in mobile view. I dont understand how to use the Global Caption to do this - can you assist any further.
    Thank you

  4. Support Staff 4 Posted by Dmytro Semenov on 04 Dec, 2017 03:36 PM

    Dmytro Semenov's Avatar

    To enable global caption, set option globalCaption:true and define markup like:

    <div class="rsContent">
        <img class="rsImg" src="images/123.jpg" alt="">
        <div class="rsCaption">
            Caption HTML content

    then, after slider initialization, you may move global caption element anywhere, e.g.:

  5. 5 Posted by claire on 12 Dec, 2017 12:39 PM

    claire's Avatar

    Hi, thanks for your help so far, I have made some good advances on the slider and got it how I want it to look, however the content underneath the slider in mobile view is not positioning itself underneath it because of the absolute positioning.
    How can I make the content underneath apear under the slider - the content may change height so this cannot be fixed. My example online is here: https://www.blakedesigns.co.uk/slider/new/slider3.html
    As you can see the "content underneath" is ok on desktop view but in mobile needs positioning below the slider.
    Can you please assist further.
    Thank you

  6. Support Staff 6 Posted by Dmytro Semenov on 12 Dec, 2017 05:22 PM

    Dmytro Semenov's Avatar

    Well, don't make it absolute positoned on small screens, you currently have position:absolute style on #caption element.

  7. 7 Posted by claire on 12 Dec, 2017 06:05 PM

    claire's Avatar

    Oh dear! Of course, must have been having a brain melt lol
    All fixed, thank you so much for your support I've got it just as I want - thank you.

Reply to this discussion

Internal reply

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

Attaching KB article:


Already uploaded files

  • hero-panel-slider-1.jpg 283 KB
  • hero-panel-slider-2.jpg 190 KB

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


? 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