Re: Size and different content in circle

[DustinWoods]

[Check out this example I made](http://codepen.io/DustinWoods/full/hsfqw). Try playing with the size of the window, notice the circle is fluid, and does not become an oval.

Looking at your code, it looks like you’re trying the same approch I took. You’re setting border radius to half the size of the square div. Perfect! Now for fluid width, you’ll want the div to be a percentage of the window. So let’s say you set

.circle {width: 70%;}

This would be fine, but the height isn’t the same, so it becomes an oval.
(I had to do a little research for this part) If you give the circle a container, and set

.circle {padding-bottom: 100%;}

This will set the total height to the same as the width. This is essentially creating a fluid-width square, and with it’s border-radius set to 50%, you’ll have a circle with fluid width.

You might want to play with media queries to get it looking nice at different sizes.