@YuriyCherniy

Как в мобильной версии отцентровать элементы футера?

Сейчас в десктопной версии футер выглядит так:
5ecad9d320c02973926098.png
в мобильной так:
5ecad9f26b177892015425.png
Как в мобильной версии заставить строку с телефоном и с социальными иконками отображаться по центру?
Текущая реализация выглядит так:
<footer class="footer mt-2">
    <div class="container my-2">
      <div class="d-sm-flex justify-content-between">
        <div class="footer-left">
          <div class="row">
            <img src="{% static 'phone.svg' %}" class="mx-2 mb-2 my-lg-0">
            <h4 class="my-auto">{{ social_links.phone_number }}</h4>
          </div>
        </div>
        <div class="footer-right">
          {% if social_links.market %}
          <a href="{{ social_links.market }}"><img src="{% static 'cart.svg' %}" class="mr-3"></a>
          {% endif %}

          {% if social_links.instagram %}
          <a href="{{ social_links.instagram }}"><img src="{% static 'instagram1.svg' %}" class="mr-3"></a>
          {% endif %}

          {% if social_links.vk %}
          <a href="{{ social_links.vk }}"><img src="{% static 'vk.svg' %}" class="mr-3"></a>
          {% endif %}
        </div>
      </div>
    </div>
  </footer>

Использую Bootstrap 4.
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 1
@loonny
Используйте класс justify-content-center для выравнивая контента по центру.
Так же не забывайте что justify-content можно использовать с sm | md | lg | xl.

То есть что бы сделать justify-content-center только для экранов <576px, и оставить justify-content-between для остальных нужно сделать так:
<div class="d-flex justify-content-center justify-content-sm-center">
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sellavi Москва
от 60 000 до 90 000 ₽
Sellavi Москва
от 75 000 до 110 000 ₽
от 80 000 до 160 000 ₽
11 июл. 2020, в 14:28
80000 руб./за проект
11 июл. 2020, в 14:05
5000 руб./за проект
11 июл. 2020, в 13:48
8000 руб./за проект