Text in circle do responsive

Question

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.

You can use the wrap property , So if the text is longer than the circle then the remaining character willl go to the next line — Thanveer Shah, Jan 20 '19 at 11:04

Laurens · Accepted Answer · 2019-01-20T12:25:37.793

2

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/

edited Jan 20 '19 at 12:25

answered Jan 20 '19 at 11:20

Laurens

2,596
11
21

I don't need increase width. – Dumitru Jan 20 '19 at 12:10
then how do you want to make it responsive? – Laurens Jan 20 '19 at 12:18
how I can do text responsive? But not circles. When number is 10000, then do small text – Dumitru Jan 20 '19 at 12:20
Not clear at all from your question, but here you can read about various ways to achieve responsive font-size based on container width: https://css-tricks.com/fitting-text-to-a-container/ – Laurens Jan 20 '19 at 12:24

score 0 · Answer 2 · answered Jan 20 '19 at 11:16

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>

Text in circle do responsive

2 Answers2