Search code examples
htmlcsspositionscreenresolution

How to use position method in % in HTML/CSS to adjust to monitor resolution with more precision?

In my program, I need to place the image of a button on top of another image exactly where that button is supposed to be. To be able to use it in different monitor resolution, I position the images using %. I also set up height and width of the body (or div) to 100vw and 100vh (i also tried to screen.height and window.height). But when I change resolution of the monitor, the images adjust to the new resolution but now with enough precision y the height (width is fine). The button is displayed a little bit higher in a lower resolution. Why is not working?

.alarm img {
  position: fixed;
  width: 4.5%;
  left: 41.7%;
  top: 71%;
}

.faceplate img {
  position: fixed;
  width: 17%;
  left: 40%;
  top: 40%;
  margin-left: 0px;
  margin-top: 0px;
}
<html>

<body style="width:100vw; height:100vh; margin:0;padding:0">
  <div_logo class="faceplate"><img src="pictures/asel3_faceplate.png">

    <div_alarm class="alarm"><img src="pictures/asel3_alarm.png"></div_alarm>

  </div_logo>
</body>

</html>

enter image description here

Solution

  • You should use media queries to fix this problem for different screen sizes. You have to create different types of CSS for different types of screen sizes.

    In this fact, you have to go to media queries.

    For more details, you can follow the link

    1. https://www.w3schools.com/HOWTO/howto_css_media_query_breakpoints.asp

    In media, query defines your CSS style for different screen sizes.