How to make the Draw on Image widget mobile responsive?

However, I am still having the same problem with the "draw on image" plugin.

I think it is due to the size of my image.  Is there a way I could set up a different image for a certain resolution?  I could photoshop the 4 jackets in a "one after another" position.

https://form.jotform.com/61168140352246

 

Unfortunately, the Draw on Image needs its image to be of fixed (unchanging) size in order for the drawn image to be correctly positioned. If we applied regular CSS to shrink / resize the image into making the image appear mobile responsive, the drawing of the user would no longer be exactly positioned.

It can be imagined as such that, when the size of the background image is constant, when user draws something over the sleeve - the drawing can correctly be placed over the sleeve in your submissions.

However, if the background image was made responsive and it resized itself according to the screen size of the device, while user would think that they are drawing over the sleeve, the actual drawing would actually be made on another part of the image - not on the sleeve.

This means that the image must be presented in its full size, even if that size is larger than the mobile device screen. What you can do to work around this limitation is to force the Draw On Image widget to display a horizontal scrollbar when the screen is not wide enough to display the full image.

We can do that by adding the following custom CSS to the widget:

#board {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
.drawing-board-canvas-wrapper, .drawing-board-canvas {
width: 520px !important;
}

We can add this CSS to the widget by clicking on its wand-shaped icon, then on the Custom CSS tab, and pasting it there:

This will add a horizontal scrollbar, so that users on narrow screens can still scroll the image to the right:

Please try it out and let us know if this will work to your satisfaction.

You guys are on it!

For some reason I see no change on my iPhone 6

I am starting to wonder if it wouldn't be simpler to add an extra line of text under the label that stated:"mobile users should use landscape mode"

https://form.jotform.com/61168140352246

 

Thank you so much!

I'm checking the issue to view the form on iPhone. Please allow me some time to check on it and get back to you with relevant information. 

Thank you for your patience.