Image Hotspots - Inconsistent positioning

1. I started with a scale background image of a badminton court

https://drive.google.com/open?id=1_2bh-oEHV7XDjHIxGj3Tlec2hTRIrE3b

I proceeded to add hotspots and pop-up content

Problems:

- on mobile and smaller desktop window widths, the popup covers the entire background image even when the "Cover entire background image" is unchecked; scroll down then click on hot spot near bottom of image results in the the pop up text appearing offscreen

- on mobile, the hotspot image doesn't scale down; on mobile, this leads to ambiguity as to which line on the background image it corresponds to; as a side-effect, I've had to position the hotspots off-line causing the hotspot to appear misaligned on desktop

2. Wordpress 5.0.3

3. Mobile and Desktop

4. Chrome, Firefox, Safari

5. H5P verson 1.11.3

6. Image Hotspots, http://peelbadminton.ca/badminton-court-lines/

7. None

8. None

9. Screenshots

Desktop:

https://drive.google.com/open?id=1MwUPS1zugzJ4ZIZA_YDBcK4F3EY5bzOY

https://drive.google.com/open?id=14UFGj9JwJpRqBJ1vpYXAZ5WQySrdd6uR

Mobile:

https://drive.google.com/open?id=1HLz8ONbZH6xrZGAJpJQr3dP1YOkZqNym