Responsive circles with CSS

Wednesday, April 16, 2014

We recently released a dashboard for the Hire Space venues’ CMS and the layout involves lots of circular badges with numbers in.

Analytics Screenshot

I’m no CSS whizz, but I did have fun styling this and it turns out that creating fully responsive circular badges with nothing but CSS is easy. Here are the classes to create the circles:

.circle {
margin-left: auto;
margin-right: auto;
border-radius: 50%;
width: 100%;
position: relative;
}

.circle-border {
border: 1px solid black;
}

.circle-solid{
background-color: whitesmoke;
}

.circle:before {
content: "";
display: block;
padding-top: 100%;
}

.circle-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}

And a class for the text inside the circle:

.score-text {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 1em;
line-height: 1em;
font-size: 1em;
}

To ensure that the text is vertically aligned in the centre of the circle, the line-height, font-size and height of the containing div need to be the same.

Markup for a circle with a border and some text inside:

<div class="circle circle-border">
     <div class="circle-inner">
         <div class="score-text">
            SOME TEXT
          </div>
     </div>
</div>

Wrapping the circle div in a responsively sized div (like one of the Bootstrap col-* classes) gives a responsively sized circle. The final touch is for the inner text to be responsive as well. Happily, this too is possible with CSS, using the ‘viewport width (vw)’ unit of measurement. 1vw is 1 percent of the viewport width.

.score-text {
height: 3vw;
line-height: 3vw;
font-size: 3vw;
}

The result: responsively sized, vertically centred text for your badge.

Of course browser support for the viewport width units doesn’t extend back as far as you might need, so make sure to include a fallback. Also, a quirk in Chrome is that the text won’t be re-painted when the browser is re-sized, so the text is only responsive to the initial browser size. To get around this, I did break from the pure CSS approach and use a little JQuery fix:

var causeRepaintsOn = $('.score-text');

$(window).resize(function () {
    causeRepaintsOn.css("z-index", 1);
});

And that’s it!

NB: of course, in IE < 9 these will be responsive squares – not quite as pretty!


8 comments on “Responsive circles with CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *