Creating responsive circle borders in CSS and/or jQuery

Question

I got a PSD from our designers today with the following layout:

Visual

They want to include 3 circles, evenly spaced, that also have to be responsive. Every solution that I've tried so far has failed.

My code at the moment is as follows:

CSS (compiled from SCSS)

 .section2 .info-box {
    float: left;
    display: block;
    margin-right: 10.1484%;
    width: 26.56773%; }
    /* line 89, /Users/chriswatson/.rvm/gems/ruby-2.1.5/gems/neat-1.7.2/app/assets/stylesheets/grid/_span-columns.scss */
    .section2 .info-box:last-child {
      margin-right: 0; }
    @media screen and (max-width: 992px) {
      /* line 84, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
      .section2 .info-box {
        float: left;
        display: block;
        margin-right: 38.19821%;
        width: 100%;
        margin-bottom: 40px;
        background-color: rgba(250, 250, 250, 0.1);
        padding: 15px; }
        /* line 89, /Users/chriswatson/.rvm/gems/ruby-2.1.5/gems/neat-1.7.2/app/assets/stylesheets/grid/_span-columns.scss */
        .section2 .info-box:last-child {
          margin-right: 0; } }
    /* line 94, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
    .section2 .info-box img {
      height: 90px;
      margin-bottom: 20px; }
    /* line 99, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
    .section2 .info-box h2 {
      font-size: 1.2em; }
    /* line 103, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
    .section2 .info-box p {
      font-size: 18px; }

HTML

<div class="full-width">
        <h1>A Comprehensive Solution</h1>
        <div class="info-box">
          <div class="circle">
            <img src="/images/timer.png" alt="timer" />
            <h2>Real-Time</h2>
            <p>NUVI monitors 12 social networks and nearly 4 million RSS feeds in over 20 languages in Real Time.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
        <div class="info-box themiddleone">
          <div class="circle">
            <img src="/images/multi-monitors.png" alt="monitors" />
            <h2>Visualizations</h2>
            <p>Beautiful visualizations and dashboards make it easy to see actionable insights.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
        <div class="info-box">
          <div class="circle">
            <img src="/images/server.png" alt="server" />
            <h2>Reporting</h2>
            <p>Beautiful visualizations and dashboards make it easy to see actionable insights.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
    </div>

How can I get those circles to appear as they are pictured above?

Maybe you can elaborate on *how* you want it to be responsive? — technophobia, Apr 29 '15 at 16:13
In a situation like this, especially if you received the designs in PSD form and want to have legacy browser compatibility, I usually advise using an image for the circles. I would make them a background image that is just the circle itself, with everything else being transparent — Zachary Kniebel, Apr 29 '15 at 16:14
That's not plain CSS BTW. Either post the CSS or update the question tags with less, or sass, or whatever that is please. — j08691, Apr 29 '15 at 16:20
As far as how I want it to be responsive, I just want it to maintain the size of the circle as the browser window resizes. Supporting legacy browsers isn't super important, but a fallback would be nice. — watzon, Apr 29 '15 at 16:23
There is no "Sass solution", just post the compiled CSS and remove the sass tag. — cimmanon, Apr 29 '15 at 16:28
@cimmanon I added the CSS instead. I was trying to keep it cleaner — watzon, Apr 29 '15 at 16:33
@mascaliente check this SO link. http://stackoverflow.com/questions/12945891/responsive-css-circles/14013200#14013200 — Kheema Pandey, Apr 29 '15 at 16:55

score 0 · Answer 1 · answered Apr 29 '15 at 16:25

0

You can do this with viewport units

body {
  text-align: center;
}
div {
  width: 20vw;
  height: 20vw;
  margin: 2vw;
  border-radius: 50%;
  background: red;
  border: 1px solid grey;
  display: inline-block;
}

<div></div>
<div></div>
<div></div>

answered Apr 29 '15 at 16:25

Paulie_D

107,962
13
142
161

I was struggling to creating the circle using `%` value. But you used really creative solution used of `view port` units. Using `rem` and `em` will not work in this case. – Kheema Pandey Apr 29 '15 at 16:35

score 0 · Answer 2 · answered Apr 29 '15 at 16:36

0

Here is the CSS (approximately) that you would need. Of course you have to make the media queries to the specifications you need, but this is just a sample. And to test it in the jsfiddle, you can widen and shorten the view window to see it change:

 .info-box {
    display: inline-block;
    width: 29.5%;
    height: auto;
    border: 1px solid #FFF;
       padding: 100px;

}
.circle img {
    height: 70vh;
    margin-bottom: 20px;
    border-radius:50%;

}

@media screen and (max-width: 800px){
    .circle img{
       height: 40vh;   
    }
}

DEMO

answered Apr 29 '15 at 16:36

carinlynchin

389
1
3
13

you are using different different units; for example `vh` `px` `%`. please be consistent . – Kheema Pandey Apr 29 '15 at 16:40
Ok, i do understand what you mean, but there are reasons to use different units sometimes. Sometimes you want it based off a percentage of the viewport and sometimes you want it based off a percentage of the parent....thus the different units. In this case, yes it was a bit sloppy but I do use different units in my own things for this very reason. – carinlynchin Apr 29 '15 at 16:43
well I didn't used so much units at same time.. Most of the time I used `%` and `em`. – Kheema Pandey Apr 29 '15 at 16:45
Yes, thats why i said i understand how the sample can be a bit too much...it was admittingly sloppy....but you must also know that there are different units for a reason. They mean different things and interact differently. So just keep that in mind. – carinlynchin Apr 29 '15 at 16:47

Creating responsive circle borders in CSS and/or jQuery

2 Answers2