title: Responsive CSS Circles
body: <h2>Goal:</h2>
  
  <p><strong>Responsive CSS circles that:</strong></p>
  
  <ol>
  <li>Scale with equal radius.</li>
  <li>Radius can be calculated by percent.</li>
  <li>Radius can be controlled by media queries.</li>
  </ol>
  
  <hr>
  
  <p><em>If solution is <strong>javascript</strong>, I still need to emulate media query triggers. I dont 'need' media queries but I do want the ability to control the radius by percentage at certain widths:</em></p>
  
  <pre><code>@media (max-width : 320px) 
  {
      .x2{padding: 50%;}
  }
  
  @media (min-width : 321px) and (max-width : 800px)
  {
      .x2{padding: 25%;}
  }
  
  @media (min-width: 801px)
  {
      .x2{padding: 12.5%;}
  }
  </code></pre>
  
  <p><strong>Here is what I have so far:</strong></p>
  
  <p><a href="http://jsfiddle.net/QmPhb/" rel="nofollow noreferrer">http://jsfiddle.net/QmPhb/</a></p>
  
  <pre><code>&lt;div class="x1"&gt;
      &lt;div class="x2"&gt;
          lol dude      
      &lt;/div&gt;
      &lt;div class="x2"&gt;&lt;/div&gt;
      &lt;div class="x2"&gt;&lt;/div&gt;
      &lt;div class="x2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .x1
  {
      float:left;
      width:100%;
  }
  
  .x2
  {
      display:block;
      float:left;
      padding: 12.5%;          //Currently being used to control radius.
      width:auto;
      height:auto;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      -khtml-border-radius: 50%;
      background:#eee;
      text-align:center;
  }
  </code></pre>
  
  <h2>Problems:</h2>
  
  <p><strong>In this solution, when content is added to a circle:</strong></p>
  
  <ul>
  <li>The shape contorts when scaled past it's available padding.</li>
  <li>Increases the size of the radius.</li>
  </ul>
  
  <hr>
  
  <h2>Update:</h2>
  
  <p>I've built a working solution for this here: 
  <a href="https://stackoverflow.com/questions/12945891/responsive-css-circles/14013200#14013200">Responsive CSS Circles</a></p>