Responsive Circles Nested Inside Each Other

Hi John, how are you? I like the idea; it's very interesting. I never thought of it before. That's what intrigued me the most and I just needed to test myself!

First of, I'd like to point out (and perhaps give a feedback on the code) that there's NO 100% right way to do it! I mean, we all tackled the problem at a way that worked for us.

So, without a further ado, here's how I approached the challenge:

.circles_container {
  position: relative;
}

.circle {
  border-radius: 50%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#b_circle {
  background: #ddd;
  width: 70vh;
  height: 70vh;
}

#m_circle {
  background: teal;
  width: 50vh;
  height: 50vh;
  margin: 10vh;
}

#s_circle {
  background: red;
  width: 35vh;
  height: 35vh;
  margin: 7.5vh;
}

First of I set the position propertie of the parent container (the container of all the cricles) to relative, so I could center the circles. Then, as a complimentary I've set all of the circles' position propertie values to be absolute (which makes them relative to the first ancestor HTML element with position propertie value of 'relative') and positioned them accordingly with 'top', 'right', 'bottom' and 'left' properties - which is 0 (standard technique of centering the elements on the page).

Now, here's the fun part! I've set the width and height to be the same values (which forms the circle, duh), but (here's the but!) I've set their values relative to the browser window's height - why? Well, I was doing it on a 1920x1080 monitor and the preview container on codepen had much bigger width than the height and I didn't want the circles to cause the scrolling. Now, I'd advise you to use Media Queries and tackle different screen sizes and perhaps on the screens with lower width than their height (like smartphones and tablets on portret view) use the 'vw' measure instead (which is basicly same as the '%' - which relative to the browser's width).

Another thing is that I've set the margin accordingly of each one of them. The basic formula is as follows:

[ outsideCirclesWidth(Height) - insideCirclesWidth(Height) ] / 2

as, we want to have the margin from all 4 sides, so we can center them perfectly inside each other.

Hope that helps you out. I'd like to see the use of this concept as it's really innovative.

Best of luck mate!