How to set an item with position absolute at the exact location everytime CSS

Venoz 0
Viewed 24

I have a Grid template and I am using a countdown timer with React, that returns how many seconds are left. Unfortunately, I need to use it in a different child div, because there is a function I am using. I can edit it but it would take lots of refactoring and testing everything again, so I would prefer not to.

Here is my .css code:

    .countdown{
        position: absolute;
        top: 11.4%;
        left: 70.4%;
        font-size: 14px;
        color: red;  
    }

When the screen is smaller, it is positioned as I want to but as the width gets bigger, the element goes more to the left (so it doesn't work with percentage). And the problem is that if I want a media-query it would take almost every single width resolution option. So is there another way to position the element with the absolute attribute and it doesn't get too much moved from its position in the different resolution?

css
2 Answers

Use pixels instead of percentages for your top and left values.

Megan Kuhn0

If your parent width and height was set with viewport sizes vh,vw It would be at the same position in any device. because the parent is responsive and we are your using percentage which means it always be 70% from the left. if the screen size is 100px it will be 70px from the left & screen size is 1000px it will be 700px from the left. I hope it makes sense.

.countdown {
  position: absolute;
  top: 11.4%;
  left: 70.4%;
  font-size: 14px;
  color: red;
  outline: 1px solid red;
}

.parent {
  position: relative;
  width: 80vw;
  height: 80vh;
  outline: 1px solid red;
}
<div class="parent">
  <div class="countdown">
    09:00
  </div>
</div>

UmairFarooq0
Related