Hello Webflow Community! I’m working on a venue site, and I’m having trouble creating my elements in a way that scale and position properly as the browser size changes. I’m trying to use a top-down drone photo as a map, which upon hover of specific elements (ie. the barn, house, ceremony area), illuminate and serve as link-buttons to the specific pages. I’ve absolutely positioned the elements and used positioning to get the hover in the right spot. But as you can imagine, as soon as I make the window full-screen, or try to switch to mobile, the element is in a completely different spot.
How could I anchor/pin the outlines so that they remain in the correct spot in-relation to the map regardless of the window/platform? Any help would be greatly appreciated!
Please let me know if there is anything else that I can provide!
Here is my site Read-Only: https://preview.webflow.com/preview/mcclure-house-demo?utm_medium=preview_link&utm_source=designer&utm_content=mcclure-house-demo&preview=92cbed4f4bd6edbb4044b7d836d19cbc&mode=preview
Published Site: https://mcclure-house-demo.webflow.io