Solution 1 :

Just change your style for .container the rule grid-gap like this (I changed it to 30px for example)

$(function() {
  $('.chart').easyPieChart({
    size: 160,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  });
});
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 160px);
  /* Use this rule to control the space between the circles for example I changed it to 30px*/
  grid-gap: 30px;
  margin: auto 0;
}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 160px);
  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(4, 160px);
  }
}

.container .box {
  width: 100%;
}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;
}

.container .box .chart {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}
<div class="container">
  <div class="box">
    <div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>
    <h2>Html</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="90" data-scale-color="#ffb400">90%</div>
    <h2>Css</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="85" data-scale-color="#ffb400">85%</div>
    <h2>Javascript</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="95" data-scale-color="#ffb400">95%</div>
    <h2>Photoshop</h2>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>

Problem :

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 80px);
  grid-gap: 10px;
  margin: auto 0;

}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 80px);

  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 80px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(4, 80px);
  }
}

.container .box {
  width: 100%;

}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;

}

.container .box .chart {

  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 120px;
  height: 80px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}
$(function() {
  $('.chart').easyPieChart({
    size: 80,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  });
});

I want to make the circle closer, but it seems not to be working. I just try everything on this CSS and nothing seems to be working here. Does anyone know how to solve this? which one should I change to make the circle closer? For the gap between circle A and B and C and D.

UPDATE the js and css already been resized , but the line is wider , any sollution ?

Comments

Comment posted by how to create a minimal reproducible example

Welcome to Stack Overflow! Please include your HTML. How could we test this without that? Please read

Comment posted by Saadi Toumi Fouad

Just change your style for

Comment posted by Rust Romania Player

how can i resize the circle ? its seems if i resize from % , the gap cant be change

By

Leave a Reply

Your email address will not be published. Required fields are marked *