Блог

Я пытаюсь вставить значок font awesome перед текстом внутри абзаца, однако, когда я воспроизводю его как смартфон, значок смешивается с текстом. Если я добавлю отступы / поля или что-то в этом роде, при просмотре на смартфоне все будет отлично, но на значке на рабочем столе пока нет текста. Как я могу сделать так, чтобы смартфон выглядел как на рабочем столе, не изменяя последний?

Вот некоторое представление о коде:

 <header>
  <h1>This is a text <br> reference <b>33131</b></h1>
  <h3>Something Here</h2>
  <p>
    <b class="b_title">Field:</b>
    <br>
    Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="fas fa-compass fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="fas fa-compass fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="far fa-calendar fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="far fa-clock fa-fw" aria-hidden="true"></i> Something Heredays
  </p>
</header>

<ul class="progress">
  {% for move in object.moves %}
    {% if loop.first %}
      <li class="progress__item progress__item--active">
    {% else %}
      <li class="progress__item progress__item--completed">
    {% endif %}
      <p class="progress__info"><i class="far fa-calendar fa-fw" aria-hidden="true"></i><b>Something Here</b></p>
      <p class="progress__info"><i class="fas fa-compass fa-fw" aria-hidden="true"></i><b>Something Here</b></p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p></p>
    </li>
  {% endfor %}
</ul>
  

https://jsfiddle.net/aipim/5q978fym/

Как я использую Jinja2, он не будет компилироваться. Но ниже я вставляю изображения для лучшего понимания.

Версия для настольных компьютеров:

Мобильная версия:

После долгих размышлений и чтения об этом я обратился за помощью к другу, который обнаружил, что это происходит из-за необходимости использовать мета-тег viewport в заголовке.

 <meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"
 />
  

Наконец-то, это сработало! Когда я создавал свой пример на jsfiddle, мой шаблон, должно быть, унаследовал его заголовок.

Вы можете добавить медиа-запрос для своего мобильного устройства, который не повлияет на вашу настольную версию,

 @media only screen and (max-width: 768px) {
  p.progress__info i{margin-right:10px;}
}