Applying CSS (vmin) to entire Royal Slider block

t4h's Avatar


03 Mar, 2018 12:43 PM

I'm trying to use css to proportionally shrink the entire Royal Slider block/container (main photo, thumbs and arrow nav) so that whole slider always fits in the view port. Currently I'm using vmin with the CSS below. It shrinks the photo, but doesn't affect the rest of the slider elements. Is there a class or id I should be targeting that would affect everything? Or another solution.
/* Scale down on small/wide viewports */
.royalSlider {
   -o-object-fit: contain;
    object-fit: contain;
    max-height: 80vmin!important;
    max-width: auto!important;
    width: auto!important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: auto;

  1. Support Staff 1 Posted by Dmitry Semenov on 03 Mar, 2018 12:47 PM

    Dmitry Semenov's Avatar

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


? 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