Min-height breaks on responsive

lucasfbustamante's Avatar

lucasfbustamante

14 Apr, 2018 01:30 AM

I'm having a issue with my slider height on mobile. Some part of it disappears:

Min-height breaks on responsive

Code:

$("#rsDepoimentos").royalSlider({
            autoHeight: false,
            autoScaleSlider:true,
            imageScaleMode:'fill',
            imageAlignCenter: true,
            slidesOrientation: 'vertical',
            arrowsNav:true,
            arrowsNavAutoHide: true,
            arrowsNavHideOnTouch: true,
            keyboardNavEnabled: true,
            navigateByClick: true,
            controlNavigation: 'none',
            fadeinLoadedSlide: true,
            globalCaption: true,
            globalCaptionInside: false,
            addActiveClass: true,
        });
<div class="row" id="rsDepoimentos">
    <!-- Slider item -->
    <div class="rsContent">
        <div class="depoimento">
            <i class="fa fa-quote-left"></i>
            <div class="conteudo">O empreendimento em geral é muito bom, principalmente a área de lazer. Os equipamentos da academia, esteiras, bicicletas, <strong>tudo excelente</strong>. E o fato da piscina ser climatizada faz toda a diferença.</div>
            <i class="fa fa-quote-right"></i>
        </div>
        <div class="quem">
            <i class="fa fa caret-up"></i>
            <div class="conteudo"><strong>Valdir</strong> Taub</div>
        </div>
    </div>
    <!-- //Slider item -->
</div>

The slider consists of text only. Please, what I am doing wrong?

  1. Support Staff 1 Posted by Dmitry Semenov on 14 Apr, 2018 04:45 AM

    Dmitry Semenov's Avatar

    Hello,

    You enabled autoScaleSlider, which means slider always scales at a fixed aspect ratio.

    To make slider scale based on content inside, you may use autoHeight option, as shown here http://dimsemenov.com/plugins/royal-slider/content-slider/

  2. 2 Posted by lucasfbustamant... on 14 Apr, 2018 11:38 AM

    lucasfbustamante's Avatar

    Thabks for the reply Dimitry. I have tried autoHeight as well, but then
    each slider turns 8px height only.

  3. 3 Posted by lucasfbustamant... on 14 Apr, 2018 12:11 PM

    lucasfbustamante's Avatar

    I had to call $(window).resize(); just after calling the slider, then the height was calculated correctly. Thanks, Dimitry.

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