如何防止我的圈子移动

Question

Inside this Codepen each of the circles need to transition into a new configuration at 800px . The configuration I'm looking for is to have circle1 and circle2 still centered in the page and have circle3 underneath circles 1 and 2. For clarity the image bellow show's how I want the circles to end up.

HTML:

<div class="circles">
  <div class="circle1">
    <a id="projects" href="#">Projects</a>
  </div>

  <div class="circle2">
    <a id="about" href="#">About</a>
  </div>

  <div class="circle3">
      <a id="contact" href="#">Contact</a>
  </div>
</div>

As you can see in the screen shot I'm was able to transition circle1 and circle2 into moving slightly to the left while also moving circle3 underneath circle1 and circle2 by telling circle3 to move left: -150px .

However circle3 does not want to stay in his position when he is moved. So if I slide him down then we will obviously keep sliding to the bottom left. No matter where I move circle3 he keeps on moving when I move the view port to smaller size.

Here is my media query that is telling the circles to move when at 800px :

@media (max-width: 800px) {
  .circles {
    width: 80%;
  }

  .circle1, circle2 {
    left: 20%;
  }

  .circle3 {
    left: -150px;
  }
}

I'm thinking this has something to moving circle3 to left: -150px .

How do I keep the circle3 from continuing to move while also keeping it centered between circle1 and circle2 ?

Answer 1

Try my solution (compiled SCSS to CSS for code snippet, see original on Codepen ):

 .circles { padding: 2rem; display: flex; margin: 0 auto; width: 90%; } .circle1, .circle2, .circle3 { display: flex; position: relative; justify-content: center; border-radius: 50%; padding-bottom: 30%; height: 0; width: 30%; margin: 5px; background-color: magenta; left: 0; transition: margin-top 0.5s linear, left 0.5s linear; } .circle1 #projects, .circle2 #projects, .circle3 #projects, .circle2 #about, .circle3 #contact { line-height: 1; margin-top: -0.5em; padding-top: 50%; color: #fff; } .circle2 { background-color: blue; } .circle3 { background-color: gold; } @media (max-width: 800px) { .circle1, .circle2, .circle3, .circle2 { left: 15%; } .circle3 { margin: 0 auto; margin-top: 28.5%; left: -35.11%; } } 

 <div class="circles"> <div class="circle1"> <a id="projects" href="#">Projects</a> </div> <div class="circle2"> <a id="about" href="#">About</a> </div> <div class="circle3"> <a id="contact" href="#">Contact</a> </div> </div> 

You use relative values to set element's height (it's padding-bottom: 30% in your case), but absolute value to top position of .circle3 ( top: 90px ). When you're resizing viewport, height of all circles are changing, but .circle3 continues to have fixed position.

I changed top: 90px to margin-top: 28.5% and it seems OK. Also removed some unnecessary code.

PS Maybe I didn't understand your question but I saw only this problem.

Answer 2

I think that circle3 looks like he is moving but he actually is not..What's happening is that I moved him out of his original position in the first place therefore circle3 only knows where he should be based on where I told him to go.

Since I told circle3 to move left:-150px; he has gone there and will stay there even as I make the view port smaller. What is changing is the view port not circle3 has he stays in his position but dose not adjust to the position of the view port as I make it smaller.

I believe this is why circle3 will not stay centered between the two circles as he dose not know how to adjust at this moment.