Как обеспечить соответствие с валютой для небольших дисплеев?

Question

Может ли кто-нибудь помочь с этой проблемой:

Валюта помещается на строку выше фактического числа (цены), которое отображается.Он появляется только когда окно маленькое (как на мобильном телефоне).В противном случае он отображал, как он должен: € 44,95 => валюта непосредственно рядом с номером.

Текущий код:

<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">€</span>
  44,95
</span>

Какой код можно добавить, чтобы убедиться, что валютаостается на той же строке, что и число при уменьшении ширины экрана?

Answer 1

Поскольку диапазон имеет display: block, диапазон действует как элемент уровня блока, занимающий всю строку.Попробуйте другое значение, например display: inline-block или display: inline-flex

.woocommerce.single.single-product .entry-summary .price span {
  display: inline-flex;
}

Снимок экрана в мобильном представлении.