Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Responsive Circles Nested Inside Each Other

Hi guys, I'm trying to make 3 responsive circles within one another. Similar to this https://www.dropbox.com/s/emc6pbvnq7q7dbs/Screen%20Shot%202015-07-19%20at%203.57.46%20PM.png?dl=0

I feel like I'm almost there but have hit a road block. http://codepen.io/jaballadares/pen/VLGWqQ

Thanks in advance!

3 Answers

Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points

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!

Ognjen Jevremovic thanks a ton for your response! Your solution was extremely elegant. I think if I play a little bit with the "vh" values it might work perfectly for the project. I will play with it and let you know how it goes.

Wow, your solution worked perfectly! Ognjen Jevremovic

I am still fiddling with it, but making it responsive was super easy. You're the man!

http://codepen.io/jaballadares/pen/bdmdXa

I did try some things and you can do it by adding a position: relative; on the #m_circle and then add the following code in the #s_circle :

position: absolute;
top: 15%;
left: 15%;

Thanks Antoine! This worked too, but it broke sometimes when scaling the screen size at times.

Josh Cummings
Josh Cummings
16,310 Points

Hi John,

Try using the transform property on your #s_circle like so:

#s_circle {
  background: red;
  height: 0;
  padding-bottom: 70%;
  width: 70%;
  margin: 0 auto;
  transform: translateY(22%);
}

You will have to use vendor prefixes for this to work in other browsers like so:

#s_circle {
  background: red;
  height: 0;
  padding-bottom: 70%;
  width: 70%;
  margin: 0 auto;
  -webkit-transform: translateY(22%);
  -ms-transform: translateY(22%);
  transform: translateY(22%);
}

http://shouldiprefix.com/ is a good reference for this.

What we are doing is telling the browser to move the #s_circle down 22% inside of its parent container.

Hope this helps.

Josh Cummings that was exactly what I needed! I wasn't sure it was going to be possible without setting the display/position to something other than default.

Thanks so much! Now I can finally get going with the rest of the project. Let's see what happens to the responsiveness once I add input fields.