Doesnt work on mobile

jaykuntal92's Avatar

jaykuntal92

07 May, 2018 12:28 AM

hey,

I was trying to replicate the slider from a website - https://denverescaperoom.com/team-building/

Their slider looks good on desktop and phone. I was able to replicate on desktop but doesnt work on mobile.

Here's my website - http://perplexity.wpengine.com/corporate-team-building-events/

Also, how to remove shadow from the pictures on desktop?

Let me know

  1. Support Staff 1 Posted by Dmitry Semenov on 07 May, 2018 04:12 AM

    Dmitry Semenov's Avatar

    Hello,

    Their slider looks good on desktop and phone. but doesnt work on mobile.

    Please elaborate on what exactly device are you having the issue.

    Also, how to remove shadow from the pictures on desktop?

    • To disable fade/zoom effect completely, in General Options, choose template without faded images (#8)
    • To disable it just on the specific breakpoint, you'll need to use CSS media queries. Default styles of fade/zoom effect are:
    /* Scaling transforms */
    .royalSlider .rsSlide img {
      opacity: 0.45;
      -webkit-backface-visibility: hidden;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    
      -webkit-transform: scale(0.9);  
      -moz-transform: scale(0.9); 
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);
    }
    .royalSlider .rsActiveSlide img {
      opacity: 1;
      -webkit-transform: scale(1);  
      -moz-transform: scale(1); 
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
    }
    
  2. 2 Posted by jaykuntal92 on 07 May, 2018 05:20 AM

    jaykuntal92's Avatar
  3. Support Staff 3 Posted by Dmitry Semenov on 07 May, 2018 04:05 PM

    Dmitry Semenov's Avatar

    Please elaborate what exactly do you want to adjust. The slider on the page that you linked has fixed 200px height, you might want to do the same for yours - in Size & Scaling section define the height and disable auto-scale-slider option.

  4. 4 Posted by jaykuntal92 on 07 May, 2018 10:27 PM

    jaykuntal92's Avatar

    This is what im talking about .

    IT looks different on mobile.

    How can i make the same as theirs?

  5. Support Staff 5 Posted by Dmitry Semenov on 08 May, 2018 09:24 AM

    Dmitry Semenov's Avatar

    As I posted in prev message, consider increasing the height, if that's what you mean.

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