I have developed a mobile application with an icon that I manually created - a circle with text and a number inside. When testing it on a PC, everything looks and functions perfectly; however, when viewed on a mobile device, the text breaks to a new line even though there seems to be enough space for it.
My query is regarding what could be causing this issue (potentially something wrong in my CSS) and how can it be resolved (such as forcing the text to stay on the same line).
CSS
.title-circle {
width: 65px;
height: 65px;
background-color: #eb5505;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 0.9375rem;
}
.title-circle-txt {
position: relative;
top: 0.2em;
color: #fff;
text-align: center;
font-size: 9.5px;
}
.title-circle-txt span {
font-size: 24px;
display: block;
line-height: 1;
}
HTML
<span class="title-circle">
<span class="title-circle-txt">
Point
<span>1</span>
</span>
</span>