Проблема с новой строкой при тестировании мобильного приложения на реальном устройстве (iPhone - Safari)

Question

У меня есть мобильное приложение, которое содержит созданный вручную значок - кружок с текстом и номером внутри. Он выглядит и отлично работает при тестировании на ПК; однако на мобильном устройстве - текстовые фрагменты переносятся на новую строку. Я уверен, что для этого достаточно места.

Мой вопрос - в чем может быть проблема (что-то не так в моем CSS?) И как ее можно исправить (например, заставить ее остаться та же строка)?

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>

Answer 1

вы устанавливаете .title-circle-txt span класс css свойство display: block;. display: block; свойство, создающее проблему. измените display: block; на display: inline-block;, это будет исправлено.

.title-circle-txt span {
  font-size: 24px;
  display: inline-block; /* block to inline-block */
  line-height: 1;
}

Вот пример .