Search code examples
cssscalegeometry

CSS Circle - Responsive

I'm using the Bones WP theme as a starter. I have three circles, placed inside a 3 column layout (one circle in each column). Each circle is built as follows:

HTML

    <a href="#" class="services">Text</a>

CSS

    a.services {
        margin:40px 0;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        width:320px;
        height:320px;
        border:20px solid #e5f2f7;
        border-radius:100%;
        text-align:center;
        display:inline-block;
    }

I'm declaring the size of the circle (320px X 320px), so this doesn't work for mobile. I want to do this with percentages instead.

Because the column that my HTML resides in is responsive, I should be able to use a width of 100% - but how can I make sure the height stays equal to the width as it resizes? During certain break points, it becomes an elongated oval.

Solution

  • I followed this article: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

    It's a pretty awesome solution.

    CSS

    .box {
    position: relative;
    width: 50%;           /* desired width */
}

.box:before {
    content: "";
    display: block;
    padding-top: 100%;    /* initial ratio of 1:1*/
}

    Thanks for linking me to it!