So, I have a little bit of a weird idea. The background image for the landing of my (work in progress) website is a building I made in blender, and my idea is to put a simple div exactly over the door of the building, which will redirect the user from the landing page to the real homepage upon click.
I have two different versions of this background image, that I switch between via media query: a standard (horizontal) version for devices that have a landscape orientation, and an aptly cut (vertical) version for devices that have a portrait orientation. This means that the position of the door is wildly inconsistent between devices.
Now, the issue is that I’m going insane trying to find a solution to position this “door” div with good responsiveness. Any tricks to avoid using a billion media queries? If not, at least what’s the smartest way to go about those queries? (Using percentages? Using vh and vw? Using pixels?)
Thanks in advance.