Turn off thumbnails on mobile devices

Frank van Manen's Avatar

Frank van Manen

17 Jul, 2013 10:29 AM

I'm using this slider for video, thumbnail navigation is a great option for normal web browsers. However, I like to turn if off for mobile devices. I'm fine with just touch-drag through the videos. And there is not much place for navigation.

Link: http://www.frankvanmanen.com/producties/


  1. Support Staff 1 Posted by Dmitry Semenov on 18 Jul, 2013 06:56 PM

    Dmitry Semenov's Avatar


    Probably the easiest way is just to hide them via CSS - media queries + display:none. You'll also probably need to disable an option fitInViewport of "Thumbnails, tabs, bullets" section of options.


  2. 2 Posted by Frank van Manen on 18 Jul, 2013 11:40 PM

    Frank van Manen's Avatar

    Which line do I need to edit? Probably at the style.css?

    Sorry, my skills are not that good.

  3. Support Staff 3 Posted by Dmitry Semenov on 19 Jul, 2013 07:35 AM

    Dmitry Semenov's Avatar


    You may hide the thumbnails on smaller screens via CSS media queries, e.g.:

    /* hide the thumbnails when width of window is less than 1024px */
    @media screen and (max-width: 1024px){
        /* hide navigation */
        .rsNav {  display:none; width:0 !important; height:0 !important;  }

    (if you're using WP version add the styles to your theme styles.css or custom CSS theme option).

    You may also dynamically change the height of the slider, http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...


  4. 4 Posted by Frank van Manen on 19 Jul, 2013 09:32 AM

    Frank van Manen's Avatar

    Great, thanks!

  5. 5 Posted by meixger on 22 Jul, 2013 07:30 AM

    meixger's Avatar

    Dmitry, even if I hide the thumbs in my gallery (opened in Colorbox) for a width smaller 960px the current slide doesn't take the full width:


    To reproduce:
    Click on one of the thumbs in the carousel to make the gallery appear and minimize the browser window.

    Here's my CSS:

    #cboxContent .rsThumbs { display: none; }
    #cboxContent .rsOverflow { width: 100% !important; }
    #cboxContent .media-info { display: none; }

    media-info is my custom caption container.

    Beg your pardon if I pop into this discussion!

  6. Support Staff 6 Posted by Dmitry Semenov on 22 Jul, 2013 08:59 PM

    Dmitry Semenov's Avatar

    @meixger You may apply width:0 to thumbnails or disable option fitInViewport - http://dimsemenov.com/plugins/royal-slider/documentation/#thumbnails , or force 100% width on container.


  7. 7 Posted by meixger on 25 Jul, 2013 11:39 AM

    meixger's Avatar

    width:0 for the thumbnails did the job, thanks!

  8. 8 Posted by ed on 31 May, 2016 07:47 AM

    ed's Avatar

    When viewing the site in mobile device, the thumbnails are still big instead of beign smaller. How can you make the thumbnails to resize or be responsive when viewing in mobiel device. this is how they look. http://prntscr.com/bahzj9

  9. Support Staff 9 Posted by Dmitry Semenov on 31 May, 2016 04:27 PM

    Dmitry Semenov's Avatar

    @ed, you can set any size to thumbnail at any screen size via CSS media queries, please refer to http://help.dimsemenov.com/discussions/royalslider-wordpress/37436-...


  10. 10 Posted by abhinav on 09 Sep, 2017 02:37 PM

    abhinav's Avatar

    i was facing the same problem for thumbnail off for mobile view.but i was'nt able to do that for my website jobdilade.com
    now this code works for me.great

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