How to remain proportional in responsive design?

Question

I have a few circles contained within a container div. I am using percentages since I want the circles to remain responsive and enlarge depending on the screen-size. I also want those circles to remain circles and not become ovals like they are currently doing when I resize the window. It's obviously due to the fact that widths and heights of screens are rarely equal and since I am choosing percentage heights and widths, this is exactly what I should get.

However, how can I get responsive circles which remain circles on different screen-sizes?

.circle {
    margin: 5%;
    display: inline-block;
    width: 30%;
    height: 30%;
    background: #000;
    border-radius: 50%;
    position: relative;
}

@codehorse thanks for the comment but that won't work since we are not responsive anymore as we are using pixels. See the problem here http://jsfiddle.net/NTb7q/1/ — Tomatoes, Dec 03 '13 at 10:50
besides they are circles because of the border-radius. If I tweak border-radius, I will get other shapes but not circles, and I want circles at all screen-sizes. — Tomatoes, Dec 03 '13 at 10:52
Try alternative solution: http://stackoverflow.com/questions/12945891/responsive-css-circles/14013200#14013200 — RichTea, Dec 03 '13 at 10:52
@codehorse theoretically you are right, but just if your element has square dimensions. Otherwise the limit is the shortest side :) — Ria Weyprecht, Dec 03 '13 at 10:52
Check this - http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout — Vikram Rao, Dec 03 '13 at 10:54

score 1 · Answer 1 · edited May 23 '17 at 12:31

Updated your fiddle for non js soln. - http://jsfiddle.net/D6pjd/23/

Basically modified html like this (Showing only a portion) -

<div class="circles">
  <div class="circle-container">
      <div class="dummy"></div>
      <div class="circle">
        <span class="circle1"></span>
      </div>
  </div>
...
...
</div>

And changes in css -

.circle-container {
    margin: 20px;
    display: inline-block;
    position: relative;
    width: 30%;    
}

.dummy {
    padding-top: 100%; 
}

.circle {
    margin: 5%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: #000;
    border-radius: 50%;
}

Based on this - Height equal to dynamic width (CSS fluid layout)

EDIT: Updated the fiddle to keep just two circles in a row

with this solution, you get 3 circles anlinged. – web-tiki Dec 03 '13 at 11:14 — web-tiki, Dec 03 '13 at 11:14
Updated to keep just two circles in a row – Vikram Rao Dec 03 '13 at 11:22 — Vikram Rao, Dec 03 '13 at 11:22

score 1 · Answer 2 · edited May 23 '17 at 11:44

Answer based on this post

You have to make a container for each circle with a 1:1 aspect ratio. thanks to Nathan Ryan who pointed out a css solution for this. He gives a solution for a 4:3 aspect ratio but for your issue, you need a 1:1 aspect ratio. That is why you need to change margin-top:75%; to margin-top:100%; for you container .circle

Fiddle

html :

  <div class="circles">  
      <div class="circle_container">
          <div class="circle">
            <span class="circle1"></span>
          </div>
      </div>  
      <div class="circle_container">
          <div class="circle">
            <span class="circle2"></span>
          </div>
      </div> 
      <div class="circle_container">
          <div class="circle">
            <span class="circle3"></span>
          </div>
      </div>    
      <div class="circle_container">
         <div class="circle">
            <span class="circle4"></span>
          </div>
      </div>
      <div class="circle_container">
          <div class="circle">
            <span class="circle5"></span>
          </div>
      </div>  
      <div class="circle_container">
          <div class="circle">
            <span class="circle6"></span>
          </div>
      </div>
</div>

CSS :

html, body {
    background: pink;
    font-family: 'Helvetica Neue' sans-serif;
    font-size:100%;
}
.circle_container{
    float:left;
    position: relative;
    width: 30%;
    margin:10%;
}
.circle {
    margin-top: 100%
}

.circle1, .circle2,.circle3,.circle4,.circle5,.circle6 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    border-radius: 50%;
}

Setting your container to float:left; instead of display:inline-blockwill avoid the "white-spaces" between your circles and you will have total control of the width and margins of your circles.

How to remain proportional in responsive design?

2 Answers2