need a CSS advice to have a 100% width slider

contact's Avatar

contact

16 Feb, 2017 05:27 PM

Hi Dmitry .
I struggle to fixe a RS on one page of my website. (https://www.wedding-photography-minneapolis.com/test/).
The image size should appaer 100% width of the windows width. But it appears a little bit smaller (let say 90%) .
When I use my "mouse" so resize my browser windows then the Slider use the 100% of the windows.
I use to have the same problem on a other page (https://www.wedding-photography-minneapolis.com/portfolio/couple/),), that I have solve by adding some CSS code (#new-royalslider-1 .rsOverflow {width: 100%!important;} #new-royalslider-1 .rsOverflow img {width: 100%!important;}).

But the same CSS does not works here ... So could you please have a look and advise me on what to do ?
The creator of my theme think it's come from the plugin ... I hope he is wrong and that's coming from CSS... but I don't know.

Best ,
Alexandre

  1. Support Staff 1 Posted by Dmitry Semenov on 16 Feb, 2017 08:59 PM

    Dmitry Semenov's Avatar

    Hello,

    It seems your theme is applying size to some parent element of slider after it's initialized. If you disable JS on page, reload it, you'll see that the size of slider is incorrect (with padding on sides).

    You need to either find a way to disable this feature in theme or update size of the slider with delay, e.g.:

    // Add this to your theme functions.php
    function add_additional_rs_code() {
        ?>
    
    setTimeout(function() {
       var sliderInstance = $('.royalSlider').data('royalSlider'); 
       sliderInstance.updateSliderSize(true);
    }, 100);
        
        <?php
    }
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
    

    100 is a delay after which update size method will be executed (in milliseconds), modify it to fit your needs.

    Dmitry

  2. 2 Posted by contact on 16 Feb, 2017 09:38 PM

    contact's Avatar

    Thank you Dmitry !
    I have activated a plugin name Autoptimiez (who compress all css and js and load them at the end). And it’s work well now !

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