How to keep my circle div from moving

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.

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