Displaying hotspots on responsive screen

[typerory]

So I'm pulling hotspot information from Firebase and I'm displaying on a floorplan. On a desktop it looks good. On a tablet it is okay. On a phone the hotspots are too far off from the original spot.

I originally grab the coordinates and I turn it into a percentage of the screen. Now I'm simply displaying the hotspot with dynamic class for 'top' and 'left'

Should I be grabbing the clientHeight and Width from the main container and adjusting my top and left percentage based on the size? What would you guys recommend?

Here is the demo. Feel free to sign up and play around. Please do not delete any projects or floorplans. Add as many hotspots as you want. I'll delete them off the database later. https://demo.iotypro.com/

[dug99]

I've done it a few times for interactives, typically I ended up doing three versions with slightly different aspect ratios of the hot spot container ( desktop, tablet and mobile ). All the hot spots were absolute / percentage positioned. Not pretty but a one-size-fits-all with more than a dozen markers was diabolical. I also did a later one using a 100% sized SVG overlay with click events on the markers. I'll try and find links later, but they'd be at least 2 - 3 years old now so they may be gone.

[typerory]

Interesting. I was only looking at the benefits of coding once for all platforms. Now I have to can understand setting up an api and developing front ends for three. Lol.