CODEWITHSUNDEEP
htmlcss
vineeth
vineeth

Reputation: 53

Creating responsive circles in web page

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>

Upvotes: 0

Views: 557

Answers (2)

Piyali
Piyali

Reputation: 506

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>

Upvotes: 1

pol
pol

Reputation: 2701

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>

Upvotes: 1

Related Questions