OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to position an element in a specific point of a page responsively without losing my mind over media queries

  • Thread starter Thread starter user25752829
  • Start date Start date
U

user25752829

Guest
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.
<p>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.</p>
Continue reading...
 
Top