Only code I had to edit was to change paths slightly and remove:
gridframe.css("width", "calc(100vw - 22px)");
Only removed it as it was off-centering my grid to the right of screen.
Added some screens of it in action and has dynnamically resized correctly.
My only worry is that zooming in to see grid on mobile only zooms everything but the grid. I think this is because the grid is being told to stay the same size dependent on the screen size. This was the behaviour I noticed when zooming on browser but perhaps will be different when actually tested on a mobile screen. It’s a minor issue.
Thanks again for taking the time to write some code for it as was frustrating the hell out of me.
One other question I have is I set the opacity through the ‘area_map_functions.php’ file as it seemed to now override the ‘style.css’ code i had from iframe once i added in your new code. I used:
This set opacity for the grid and the ads on it. Is there anyway to independently set the opacity for the ads?
Thanks again for the help,