CODEWITHSUNDEEP
htmlcssposition
WilliamWang97
WilliamWang97

Reputation: 83

How to keep circle in sync with div

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 class="wrapper">
        <div class="Ranking"></div>
        <div class="Name">One</div>
        <div class="Summary">Summary: <br>He really hits, with a LF fit</div>
        <div class="Level">Highest Level: A+ <br> Age: 21</div>
        <div class="Body">Height: 6'1" <br> Weight: 215 lbs</div>
        <div class="Profile"><img src="images/Dustin Harris.jfif"> </div>
        <div class="Description">Five</div>
      </div>
            
</body>
</html>

Example I want to create

Upvotes: 0

Views: 163

Answers (2)

Bumhan Yu
Bumhan Yu

Reputation: 2297

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

  1. 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.

  2. 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.

Upvotes: 1

Hero SHIMA
Hero SHIMA

Reputation: 91

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.

Upvotes: 2

Related Questions