Hi,
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.
Thanks,
Ken
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"> </div>
<div class="fs-3" style="display:block; color:black">100</div>
<div class="fs-5" style="display:block; color:ccccc">Total Sales</div>
</div>
2 Likes
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>
</div>
1 Like