I have written a little website in HTML, CSS and Vanilla JavaScript. It shows you around a community garden in my town. It lets you look in the beds and greenhouse, and gives information on the plants growing there. My question is: I have spans on top of a div to create the red boxes on top of beds and plants that you can click on. But it is proving quite a challenge to keep the span in the same place relative to the div when the screen aspect ratio changes, like when looking on a mobile device in portrait compared to a desktop, which is always landscape.
The span is a child element of the div, so I thought making the span position relative would so most of the work and I’d just need to tweak sizes, but it doesn’t work at all when the aspect ratio changes. Since then, I have basically made 3 different fixed sizes that change with screen size media queries, but it’s not an ideal solution.
Here is the site so you can see what I mean by red boxes and so on: Seed Garden
Is there any way of “fixing” an element in place on top of another element? Or am I looking at this the wrong way entirely?
