shepherd icon indicating copy to clipboard operation
shepherd copied to clipboard

How to work on mobile devices?

Open elnath78 opened this issue 1 year ago • 3 comments

Is it possible to use it on mobile devices? Tested on iPhone/Safari the overlay is blocking the webiste (user cannot click cause it is modal) and it is not visible any element on the page. If not is it possible to exclude it from showing on mobile devices?

edit

So far I had to hide it using media queries, would be cool to have a way to use it on mobile devices. The problem is the menu voices I'm targetting is not visible in mobile, but collapsed on bar menu, so would be good if we could still show the steps without targetting specific menu entries.

@media screen and (max-width: 810px) {
  .sp-tour, .shepherd-modal-overlay-container{
  	display: none;
  }
}

elnath78 avatar Jul 07 '23 10:07 elnath78

@elnath78 I don't understand what you are asking. It works on mobile.

RobbieTheWagner avatar Jul 19 '23 19:07 RobbieTheWagner

@RobbieTheWagner I have a very simple design using bootstrap, and I'm targetting menu voices to give an intro about what every menu voice is doing (it is a management software not a front end website). The problem, on mobile, is that bootstrap converts the menu in the classical sandwich icon, the result is an overlay covering the whole website and making it impossible to tap. For now I disabled it on mobile until I can sort a solution. Maybe I could not target a menu voice on mobile devices and instead show the popups in the center.

elnath78 avatar Jul 19 '23 20:07 elnath78

Perhaps you're looking for the useModalOverlay option

CerceJo avatar Jul 21 '23 18:07 CerceJo