TWebResponsiveGrid Text in Circle


I am using a responsive grid which works perfectly but I would like to have the text below the number in a different font size and color. The numbers should stay as they are.


I am adding the items at run time. Each item has its own HTML:

<div style="border-radius:50%; background-color:ccccc; border:12px solid ccccc; color:black; background-color:#FFFFFF; height:200px; width:200px; text-align:center;display:flex; justify-content:center; align-items: center">xxxxx<br>yyyyy</div>

ccccc is replaced by the color I want for the circle. xxxxx is replaced by the number and yyyyy is replaced by the text. Whatever I try, paragraph, span, etc. I have been unable to manage to change the font size of yyyyy. It is always using the font size of the responsive grid.

Any help greatly appreciated.



Does this help?

<div style="font-size: 30px !important; 

Thanks, I didn't explain it very well. I can indead change the font size of yyyyy but I cannot get it to be on a new line if I do!

Managed it and am now able to make the circled smaller because of it. It's not perfect, but will do for now:


can you post your solution? it might be useful

Here it is:

<div style="border-radius:50%;background-color:darkorange;
border:10px solid darkorange; color:black; background-color:white;
height:150px; width:150px;text-align:center;display:inline-block;
flex-wrap:wrap; align-items:center">
<div style="font-size:12px; display:block">&nbsp;</div>
<div class="fs-3" style="display:block; color:black">100</div>
<div class="fs-5" style="display:block; color:ccccc">Total Sales</div>

Simplified and more precise:

<div style="border-radius:50%;background-color:ccccc;border:10px solid darkorange;
color:black; background-color:white; height:150px;width:150px; text-align:center">
<div class="fs-3" style="position:relative; top:15px; color:black">xxxxx</div>
<div class="fs-5" style="position:relative; top:15px; color:darkorange">yyyyy</div>
1 Like