CSS Circle - Responsive

Question

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.

possible duplicate of [Height equal to dynamic width (CSS fluid layout)](http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout) — sachleen, Jan 16 '14 at 18:19
or maybe [Height equals width with pure CSS](http://www.mademyday.de/css-height-equals-width-with-pure-css.html) — sachleen, Jan 16 '14 at 18:21

score 3 · Accepted Answer · edited Sep 23 '20 at 07:38

3

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!

edited Sep 23 '20 at 07:38

Deitsch

1,610
14
28

answered Jan 17 '14 at 19:58

Eric Wood

579
2
9
22

CSS Circle - Responsive

1 Answers1