Отзывчивый нижний колонтитул с использованием медиа-запросов - PullRequest
Новая
       9

Отзывчивый нижний колонтитул с использованием медиа-запросов

0 голосов
/ 26 июня 2018

Я пытаюсь расположить элементы нижнего колонтитула друг над другом в виде планшета и мобильного телефона. Есть 3 раздела моего нижнего колонтитула (контакт, логотип и информация об авторских правах). Медиа-запросы, которые я добавил, ничего не делают. В настоящее время 3 секции расположены друг над другом, но выглядят как лестница, а не как блоки, расположенные друг над другом.

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

enter image description here Может кто-нибудь сказать мне, что мне не хватает? Я только начал кодировать и манипулировать шаблонами, которые нашел в Интернете. CSS и HTML коды приведены ниже.

ОБНОВЛЕННЫЙ предварительный просмотр в реальном времени: 

.site-footer {
  padding: 5em 0;
  background: #f2f2f2;
  font-size: 13px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: #f4b214;
}

.site-footer a:hover {
  color: #f4b214;
}

.site-footer h3 {
  font-size: 15px;
  margin-bottom: 20px;
}

.site-footer .footer-link li {
  line-height: 1.5;
  margin-bottom: 15px;
}

.site-footer hr {
  width: 100%;
}

@media only screen and (min-width: 320px) {
  .site-footer .container .row .col-sm-12 {
    display: block;
    float: none;
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .site-footer .container .row .col-md-12 {
    display: block;
    float: none;
    width: 100%;
  }
}
<footer class="site-footer" role="contentinfo">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-12 col-sm-12">
        <ul class="list-unstyled footer-link">
          <li class="d-flex"><span class="mr-3">Office:</span><span class="text-black">439 South Florida Avenue 
                  <br>Suite 202
                  <br>Lakeland, Florida 33801</span></li>
          <li class="d-flex"><span class="mr-3">Phone:</span><span class="text-black">863 683 9297</span></li>
          <li class="d-flex"><span class="mr-3">Hours:</span><span class="text-black">Monday - Friday 
                  <br>8:30 AM to 5:30 PM
                  <br>Meetings by Appointment Only</span></li>
        </ul>
      </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
        <a href="index.html"><img src="img/MR_full_logo.png" style="max-width: 200px" class="center" /></a>
      </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
        <p align="right" class="copyright">Copyright &copy;
          <script>
            document.write(new Date().getFullYear());
          </script> All rights reserved <br> This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a></p>
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
      </div>
    </div>
  </div>
</footer>

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

это потому, что ваш тег p в последнем div имеет свойство align = "right", поместите его влево на маленьком экране или используйте выравнивание текста по левому краю, и для вашего изображения вы можете задать выравнивание текста по левому краю

0 голосов
/ 26 июня 2018

Эй, попробуйте следующий код и проверьте вывод, он будет соответствовать вашим требованиям. Используйте экран @media only и (max-width: 768px), чтобы получить требуемый вывод в мобильном телефоне и в виде вкладок. ширина до 768 относится к виду планшета. 

.site-footer {
  padding: 5em 0;
  background: #f2f2f2;
  font-size: 13px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: #f4b214;
}

.site-footer a:hover {
  color: #f4b214;
}

.site-footer h3 {
  font-size: 15px;
  margin-bottom: 20px;
}

.site-footer .footer-link li {
  line-height: 1.5;
  margin-bottom: 15px;
}

.site-footer hr {
  width: 100%;
}


@media only screen and (min-width: 320px) {
    .site-footer  .container .row .col-sm-12 { 
        display: block; 
        float: none;
        width: 100%;
    }
  }


@media only screen and (min-width: 768px) {
  .site-footer .container .row .col-md-12 { 
        display: block; 
        float: none;
        width: 100%;
    }
  }
  @media only screen and (max-width: 768px) {
    .site-footer{
      text-align: center;
    }

  .site-footer .footer-link li {
    list-style: none;
  }
  .site-footer p:last-child {
      text-align: center;
  }
}
<footer class="site-footer" role="contentinfo">
  <div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12 col-sm-12">
        <ul class="list-unstyled footer-link">
          <li class="d-flex"><span class="mr-3">Office:</span><span class="text-black">439 South Florida Avenue 
              <br>Suite 202
              <br>Lakeland, Florida 33801</span></li>
          <li class="d-flex"><span class="mr-3">Phone:</span><span class="text-black">863 683 9297</span></li>
          <li class="d-flex"><span class="mr-3">Hours:</span><span class="text-black">Monday - Friday 
              <br>8:30 AM to 5:30 PM
              <br>Meetings by Appointment Only</span></li>
        </ul>
      </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
          <a href="index.html"><img src="img/MR_full_logo.png" style="max-width: 200px" class="center" /></a> 
        </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
        <p align="right" class="copyright">Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved <br> This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a></p>
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
      </div>
    </div>
  </div>
</footer>
...