Creating responsive circles in web page

Question

I want to create a responsive page consisting of the 9 circles. In the below code circles change their positions whenever I change the browser size(not responsive). I tried using CSS @media queries but I couldn't create responsive.

Should I use the % for position width, height instead of the fixed 100px?

<html>
<head>
<style>
 .circle1{
     width:100px;
     height:100px;
     margin-left:600px;
     background-color:black;
     border-radius:100px;
 }
 .circle2{
     margin-left:600px;
     margin-top:30%;
     width: 100px;
     height:100px;
     background-color:darkred;
     border-radius:100px;
 }
 .circle3{
     margin-left:250px;
     margin-top:-27%;
     width: 100px;
     height:100px;
     background-color:gold;
     border-radius:100px;
 }
 .circle4{
     margin-top:-20%;
     margin-left:350px;
     width:100px;
     height:100px;
     background-color:greenyellow;
     border-radius:100px;
 }
 .circle5{
     margin-left:63%;
     margin-top:-8%;
     width: 100px;
     height:100px;
     background-color:blueviolet;
     border-radius:100px;
 }
 .circle6{
     margin-left:900px;
     margin-top:5%;
     width: 100px;
     height:100px;
     background-color:deeppink;
     border-radius:100px;
 *emphasized text*
 }
 .circle7{
     margin-left:350px;
     margin-top:7%;
     width: 100px;
     height:100px;
     background-color:blue;
     border-radius:100px;
 }
 .circle8{
     margin-left:800px;
     margin-top:-10%;
     width : 100px;
     height:100px;
     background-color:aqua;
     border-radius:100px;
 }
 .circle9{
     margin-left:600px;
     margin-top:-20%;
     width: 100px;
     height:100px;
     background-color:darkorange;
     border-radius:100px;
 }
</style>
</head>
<body>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>
    <div class="circle6"></div>
    <div class="circle7"></div>
    <div class="circle8"></div>
    <div class="circle9"></div>
</body>
</html>

which positions do you want the 9 circles to be in desktop / tablet / mobile ? — Nikhil Nanjappa, Feb 20 '17 at 01:58
i am changing screen size horizontally in my laptop via mozilla browser developer mode. expected result is one circle in center and remaining 8 circles around it. — vineeth, Feb 20 '17 at 02:02
Possible duplicate of [Responsive circle with centered content](http://stackoverflow.com/questions/34788537/responsive-circle-with-centered-content) — Deepak Yadav, Feb 20 '17 at 07:11

score 1 · Answer 1 · answered Feb 20 '17 at 02:23

Best way to get responsive circles is using percentage dimensions.
You can also use viewport(vh,vw), if you want.

When adding padding with percentage it is based on the width, putting width to 33% and padding-top (or bottom) to the same value will make both horizontal and vertical size the same.

jsFiddle link

.container {
  width: 50vw;
  margin: auto;
}

.container > div {
  border-radius: 50%;
  float: left;
  width: 33.333%;
  padding-top: 33.333%;
}

.circle1 {background-color: black;}
.circle2 {background-color: darkred;}
.circle3 {background-color: gold;}
.circle4 {background-color: greenyellow;}
.circle5 {background-color: blueviolet;}
.circle6 {background-color: deeppink;}
.circle7 {background-color: blue;}
.circle8 {background-color: aqua;}
.circle9 {background-color: darkorange;}

<div class="container">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
  <div class="circle4"></div>
  <div class="circle5"></div>
  <div class="circle6"></div>
  <div class="circle7"></div>
  <div class="circle8"></div>
  <div class="circle9"></div>
</div>

score 1 · Accepted Answer · answered Feb 20 '17 at 10:28

Here is the code :

.full{ margin:0 auto; width:70%;}
 .circle1{
    width: 15%;
    padding-top: 15%;
    margin:0 42%;
    background-color: black;
    border-radius: 50%;
 display:inline-block;
 }
 .circle2{
    width: 15%;
    padding-top: 15%;
    margin-left: 20%;
    background-color:darkred;
    border-radius: 50%;
 display:inline-block;
 margin-top:20px;
 }
 .circle3{
     width: 15%;
    padding-top: 15%;
    margin-left: 26%;
     background-color:gold;
     border-radius: 50%;
  display:inline-block;
  margin-top:20px;
  margin-right: 15%;
 }
 .circle4{
     width: 15%;
    padding-top: 15%;
    margin-left: 0%;
     background-color:greenyellow;
     border-radius: 50%;
  display:inline-block;
  margin-top:20px;
 }
 .circle5{
     width: 15%;
    padding-top: 15%;
    margin-left: 26%;
     background-color:blueviolet;
     border-radius: 50%;
  display:inline-block;
  margin-top:20px;
 }
 .circle6{
      width: 15%;
    padding-top: 15%;
    margin-left: 26%;
     background-color:deeppink;
     border-radius: 50%;
  display:inline-block;
  margin-top:20px;
 }
 .circle7{
       width: 15%;
    padding-top: 15%;
    margin-left: 20%;
     background-color:blue;
    border-radius: 50%;
  display:inline-block;
  margin-top:20px;
 }
 .circle8{
     width: 15%;
    padding-top: 15%;
    margin-left: 26%;
     background-color:aqua;
     border-radius: 50%;
    display: inline-block;
    margin-top: 20px;
 }
 .circle9{
     width: 15%;
    padding-top: 15%;
    margin: 0 42%;
     background-color:darkorange;
     border-radius: 50%;
    display: inline-block;
 }
 @media only screen and (max-width: 980px) {
  .full{width:100%;}
 }

<div class="full">
 <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>
    <div class="circle6"></div>
    <div class="circle7"></div>
    <div class="circle8"></div>
    <div class="circle9"></div>
</div>

Creating responsive circles in web page

2 Answers2