shepherd
shepherd copied to clipboard
How to work on mobile devices?
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 I don't understand what you are asking. It works on mobile.
@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.
Perhaps you're looking for the useModalOverlay
option