how to have a perfect responsive css circles?

Question

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?

Or are media queries the only option to fix this?

Thank you for your help.

   * {
    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;
   }

  <main>

   <section id="content">
    <article id="header">

     <section id="test">
      <h1>My Website</h1>
     </section>

    </article>

    <article id="description">

     <img src='images/profilePic.png' />
     
     <p></p>


    </article>

     <article class="circles">
      <div class="circle1">
       <h1>Twitter</h1>
      </div>
      <div class="circle2">
        <h1>Blog</h1>
      </div>
      <div class="circle3">
        <h1>Contact</h1>
      </div>
    </article>

   </section>

   <section id="sidebar">
    <article id="js">
     <h1>Javascript</h1>
     <p>Mini JS Projects</p>
     <p class="subtitle">Work in progress
    </article>
    <article id="forms">
     <h1>Free Forms</h1>
     <p>Feel free to download the forms</p>
    </article>
    <article id="sites">
     <h1>Portfolio</h1>
     <p>Combination of previous work and additional sites</p>
    </article>
   </section>

  </main>

score 2 · Answer 1 · answered Oct 17 '17 at 04:01

The question now is How to have a perfect responsive css square? Because when you have a square, you will easily have a circle with border-radius: 50%. Now you can found so many solution for it in SO. Here is a nice solution with flexbox item.

 

.flex-container {
    padding: 0;
    margin: 0;
    display: flex;
  
}
.flex-item {
    background: tomato;
    margin: 5px;
    color: white;
    flex: 1 0 auto;
    border-radius: 50%;    
}
.flex-item:before {
    content:'';
    float:left;
    padding-top:100%;
}

<div class="flex-container">
  <div class="flex-item ">
  </div>
  <div class="flex-item ">
  </div>
  <div class="flex-item ">
  </div>
</div>

Julio Feferman · Answer 2 · 2017-10-17T02:57:19.317

0

Updated answer

I reworked the flex containers to a minimal working example. The flex-items should all be set to

flex: 1 1 auto /* flex-grow flex-shrink flex-basis */

This allows the circle h1 flex-items to grow and shrink as necessary. It might be necessary to use js to obtain the height of a circle from its expanded width when you apply the example to your code.

Hope this helps.

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.circles {
  /* for circles within */
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.circle1,
.circle2,
.circle3 {
  display: flex;
  flex: 1 1 auto;
  width: 33vw;
  height: 33vw;
}

.circle1 h1,
.circle2 h1,
.circle3 h1 {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #fff !important;
  background-color: #db6525;
  border: 4px solid #00B2AC;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}

<article class="circles">
  <div class="circle1">
    <h1>Twitter</h1>
  </div>
  <div class="circle2">
    <h1>Blog</h1>
  </div>
  <div class="circle3">
    <h1>Content</h1>
  </div>
</article>

edited Oct 17 '17 at 02:57

answered Oct 17 '17 at 01:33

Julio Feferman

2,658
3
15
26

just wondering based on your observation that since the h1 are not direct descendents, so if I made the circle1, circle2, and circle3 `display: flex` that it would "expand"? For what it's worth, in my code displayed above, I did do that ... did I misunderstand what you said? – user273072545345 Oct 17 '17 at 02:06
And so you did, but you nest several flex containers and they are set to `flex-grow: 0`. Both `flex-grow` and `flex-shrink` should be set to 1 so the circles can resize. I updated the example to use the h1 as a flex-item of `circle` and styled by `circle h1` selector. – Julio Feferman Oct 17 '17 at 02:23
The snippet above works. If you go to full screen and resize the window you'll see the circles are perfectly responsive. There may be issues with upstream flex containers when you apply the example. I find the following a handy guide for flex: [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – Julio Feferman Oct 17 '17 at 02:33
I'm sorry, I don't doubt that this works. And I see it working in your example. The only problem is that when I transplant it into my code, the circles are ginormous! And I can't for the life of me seem to adjust it down. Also, is it wise to use `vw` measurement unit? I'm wondering if there's uniform support for it besides IE? – user273072545345 Oct 17 '17 at 03:43
also I'm beginning to wonder if I should just skip the responsive circles? Advice? – user273072545345 Oct 17 '17 at 03:45
vw or viewport width is well supported but you are right, you need a different measurement, such as the width of the main area. I think a quick solution would be to use javascript to measure the offsetWidth of that container and with that calculate exactly the height and width of each circle. there may be a css solution. – Julio Feferman Oct 17 '17 at 04:58

how to have a perfect responsive css circles?

2 Answers2