How to keep circle in sync with div-CodePudding

In the attached image below, I want to recreate the "1" circle to the left of the profile box. I'm currently trying to use CSS positioning to get it like the image above, but whenever I shrink my computer screen, the circle doesn't move with the profile box. I'm not quite sure how to fix it. I've attached my code below the image.

body{
    width: 100%;
}

 
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 80%;
    margin: auto;
    height: 100%;
}
    
.Ranking{
    position: absolute;
    left: 20px;
    top: 10%;
    transform: translateY(-50%);
    background: #000;
    color: #fff;
    height: 52px;
    width: 52px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    padding-top: 4px;
    transition: background-color .25s linear .5s;
    font-family: "Decima";
    font-size: 30px;
    line-height: 30px;
    color: #f0f0f0;
    font-weight: 300;
}
.Description{
    flex:1;
    background-color: blue;
    grid-column: 2/5;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel = "stylesheet" href="styles.css">
</head>
<body>
    <div >
        <div ></div>
        <div >One</div>
        <div >Summary: <br>He really hits, with a LF fit</div>
        <div >Highest Level: A  <br> Age: 21</div>
        <div >Height: 6'1" <br> Weight: 215 lbs</div>
        <div ><img src="images/Dustin Harris.jfif"> </div>
        <div >Five</div>
      </div>
            
</body>
</html>

CodePudding user response：

There is a CSS element called @media which will come helpful to you

@media screen (min-width: 800px) {
.container {
/* position and any property of the element according the small screen viewport*/
   }
}

800px is the screen size under which the screen become reactive.

CodePudding user response：

You might want to look at two aspects: HTML markup and CSS basics. TL;DR. See this CodePen example I put together for you.

position: absolute; looks for the closest parent that has position value of relative, absolute, or fixed. If there's no parent that has such position value, the element will be positioned absolute against the body. In your example, wrapper (i.e. the immediate parent) doesn't have position defined, thus Ranking will be positioned outside your intended area.
As a matter of fact, you won't likely need absolute positioning here. transform: translateX() indeed is a good starter. Instead of translateY(), you could move it horizontally by translateX().

Again, see this CodePen example I put together for you.