bootstrap 4 Изменение просмотра на мобильном телефоне

Question

Итак, сейчас нижний колонтитул в полноэкранном режиме выглядит так

And that is how I want it when it is full screen. But when it is mobile I want them to all be stacked and centered. I am not sure what I am doing wrong.

<footer id="footer">
  <div class="container mb-2 mt-3">
    <div class="d-flex justify-content-center">
      <div class="mt-1" style="font-size: 12px;"><p class="text-muted"> &copy; <?php echo date("Y"); ?> The Pilates Exchange LLC </p></div>
      <div class="text-muted text-center mt-1" style="font-size: 12px;"> <p class="ml-1"> | <a class="text-muted" href="<?=$us_url_root?>legal/privacy.php">Privacy Policy</a> | <a class="text-muted" href="<?=$us_url_root?>legal/useragreement.php">Terms Of Use</a> | <a href="<?=$us_url_root?>contactus.php" class="text-muted">Contact Us</a></p></div>
      <div class="ml-auto">
        <a class="pt-2 text-dark text-decoration-none" href="https://www.facebook.com/thepilatesexchange"><i class="fa fa-facebook"></i></a>
        <a class="pt-2 px-3 text-dark text-decoration-none" href="https://www.instagram.com/thepilatesexchange/"><i class="fa fa-instagram"></i></a>
        <a class="pt-2 pr-3 text-dark text-decoration-none " href="mailto:info@thepilatesxchange.com"><i class="fa fa-envelope"></i></a>
      </div>
    </div>
  </div>
</footer>

Заранее спасибо. Я почти уверен, что это должно быть легко.

Answer 1

Используйте запрос @media для мобильных устройств и измените стили. это внесет изменения только на мобильных устройствах.

@media (max-width:767px){
   .text-muted{font-size:17px}
}

в приведенном выше примере размер шрифта класса текст без звука только на мобильных устройствах будет 17 пикселей.