title: how to have a perfect responsive css circles?
body: <p>In process of learning flexbox, and confused about having perfect CSS circles that are responsive. How do I do that? As it stands, my current code has circle1, circle2, and circle3 at 100 width, and height. I don't want to hard-code their height but rather make it responsive. Is there a way to have a perfect circle in %? So it scales each time the browser is resized?</p>
  
  <p>Or are media queries the only option to fix this? </p>
  
  <p>Thank you for your help. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   * {
      box-sizing: border-box;
     }
  
     html, body {
      height: 100%; 
      font-family: sans-serif;
      font-weight: 100;
     }
  
     body {
      display: flex;
      margin: 0;
      flex-direction: column;
     }
  
     main {
      display: flex;
      flex: 1 0 100%;
  
      /*for content and sidebar */
      flex-direction: row; 
     }
  
     /* main */
     #content {
      flex: 1 0 80%;
  
      /* for header/logo and description */
      display: flex;
      flex-direction: column;
     }
  
     #description img {
      display: block;
     }
  
     #header {
      flex: 1 0 5%;
      padding: 10px;
      /* for test */
      display: flex;
      justify-content: center;
     }
  
     #test {
      display: flex;
      flex-direction: row;
     }
  
     #header h1 {
      text-align: center;
      font-size: 5em;
      padding: 0;
      margin: 0;
         font-family: 'Satisfy', cursive;
     }
  
     h1 {
           font-family: 'Satisfy', cursive;
     }
  
     #description {
      flex: 1 0 10%;
      padding: 30px;
      display: flex;
     }
  
     #description p {
      padding-left: 20px;
      font-size: 20px;
     }
  
     #description img {
       width: 250px;
       height: 250px;
  
       border-radius: 50%;
        border: 6px solid #db6525;
        border: 6px solid #00B2AC;
     }
  
     #name {
      font-size: 35px;
      color: #db6525;
          font-family: 'Satisfy', cursive;
     }
  
      #test img {
       display: inline;
       vertical-align: text-top;
       width: 100px;
       height: 100px;
       /* for the following image and description */
       display: flex;
       flex-direction: row;
       align-content: center;
       align-items: center;
     }
  
    
  
     #sidebar {
      flex: 1 0 20%;
      /* background-color: green; */
      text-align: center;
      line-height: 90%;
  
      /* for sidebar contents */
      display: flex;
      flex-direction: column;
     }
  
  
     #js {
      flex: 1 0 33.33333%;
      /* background-color: red; */
      background-color: #db6525;
      border: 20px solid #00B2AC;
      padding: 10px;
     }
  
     #js h1 {
      font-size: 50px;
     }
  
     #forms {
       flex: 1 0 33.33333%;
      /* background-color: gray; */
      background-color: #db6525;
      border: 20px solid #00B2AC;
      padding: 10px;
     }
  
     #forms h1 {
      font-size: 50px;
     }
  
     #sites {
       flex: 1 0 33.33333%;
      /* background-color: Chartreuse; */
      background-color: #db6525;
       border: 20px solid #00B2AC;
       padding: 10px;
     }
  
     #sites h1 {
      font-size: 50px;
     }
  
     .circles {
      flex: 0 0 5%;
  
      /* for circles within */
       display: flex;
       justify-content: center;
       align-items: center;   
       width: 100%;
     }
  
     .circle1 {
      flex: 0 1 33.33333%;
      display: flex;
      justify-content: center;
  
     }
  
  
     .circle1 h1{
        font-size: 12px;
        color: #fff !important;
        background-color: #db6525;
          border: 4px solid #00B2AC;
      border-radius:50%;
      height: 100px;
          width: 100px;
      text-align: center;
      vertical-align: middle;
     }
  
     .circle2 {
      flex: 0 1 33.33333%;
      display: flex;
      justify-content: center;
     }
  
     .circle2 h1 {
        font-size: 12px;
        color: #fff !important;
        background-color: #db6525;
          border: 4px solid #00B2AC;
      border-radius:50%;
      height: 100px;
          width: 100px;
        text-align: center;
      vertical-align: middle;
     }
  
     .circle3 {
      flex: 0 1 33.33333%;
      display: flex;
      justify-content: center;
     }
  
     .circle3 h1 {
        font-size: 12px;
        color: #fff !important;
         background-color: #db6525;
          border: 4px solid #00B2AC;
      border-radius:50%;
      height: 100px;
          width: 100px;
          text-align: center;
      vertical-align: middle;
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;main&gt;
  
     &lt;section id="content"&gt;
      &lt;article id="header"&gt;
  
       &lt;section id="test"&gt;
        &lt;h1&gt;My Website&lt;/h1&gt;
       &lt;/section&gt;
  
      &lt;/article&gt;
  
      &lt;article id="description"&gt;
  
       &lt;img src='images/profilePic.png' /&gt;
       
       &lt;p&gt;&lt;/p&gt;
  
  
      &lt;/article&gt;
  
       &lt;article class="circles"&gt;
        &lt;div class="circle1"&gt;
         &lt;h1&gt;Twitter&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="circle2"&gt;
          &lt;h1&gt;Blog&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="circle3"&gt;
          &lt;h1&gt;Contact&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/article&gt;
  
     &lt;/section&gt;
  
     &lt;section id="sidebar"&gt;
      &lt;article id="js"&gt;
       &lt;h1&gt;Javascript&lt;/h1&gt;
       &lt;p&gt;Mini JS Projects&lt;/p&gt;
       &lt;p class="subtitle"&gt;Work in progress
      &lt;/article&gt;
      &lt;article id="forms"&gt;
       &lt;h1&gt;Free Forms&lt;/h1&gt;
       &lt;p&gt;Feel free to download the forms&lt;/p&gt;
      &lt;/article&gt;
      &lt;article id="sites"&gt;
       &lt;h1&gt;Portfolio&lt;/h1&gt;
       &lt;p&gt;Combination of previous work and additional sites&lt;/p&gt;
      &lt;/article&gt;
     &lt;/section&gt;
  
    &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>