CODEWITHSUNDEEP
css
Dumitru
Dumitru

Reputation: 2183

Text in circle do responsive

I have circle with text:

.circle {
  width: 30px;
  height: 30px;
  background: #eee;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  margin-right: 10px;
}
<div class="circle">0</div>
<div class="circle">100</div>
<div class="circle">10000</div>

In this example, when number is big, circle is not responsive. How I can do circles responsive with width: 30px and height: 30px ? I need only these sizes for circles.

Upvotes: 0

Views: 450

Answers (2)

Laurens
Laurens

Reputation: 2607

Use the following padding-technique to make responsive circles: 

.circle {
    position:relative;
    display:inline-block;
    margin-right: 10px;
}
.circle span {
    padding:60% 10%;
    margin-top:-0.6em;
    display:flex;
}
.circle span:after {
    content:'';
    position:absolute;
    top:0; left:0;
    width:120%;
    padding-bottom:120%;
    background-color:#eee;
    border-radius:50%;
    z-index:-1;
 }
<div class="circle"><span>0</span></div>
<div class="circle"><span>100</span></div>
<div class="circle"><span>10000</span></div>
<div class="circle"><span>1000000000000</span></div>

EDIT: If you want to circle size to stay the same but change the size of the font, here are various ways to achieve responsive font-size based on parent width: https://css-tricks.com/fitting-text-to-a-container/

Upvotes: 2

Mel
Mel

Reputation: 943

The responsiveness of the layout only applies when the webpage is resized or viewed on a different screen size (depending on the device). In your case, you might need to adjust the size of the circle or reduce the font size of the text. read more about responsive layout here https://www.w3schools.com/html/html_responsive.asp

.circle {
  width: 60px;
  height: 60px;
  background: #eee;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  display: inline-block;
  margin-right: 10px;
}
<div class="circle">0</div>
<div class="circle">100</div>
<div class="circle">10000</div>

Upvotes: 0

Related Questions