Социальные иконки нижнего колонтитула не распределяются равномерно при изменении размера - PullRequest
Новая
       18

Социальные иконки нижнего колонтитула не распределяются равномерно при изменении размера

0 голосов
/ 07 мая 2018

кодовое примечание ниже

https://codepen.io/nightcoder21/pen/BxwVdJ

HTML ниже 

<section id="footer">
    <div class="container mb-1">
      <div class="row text-center text-xs-center text-sm-left text-md-left mb-2">



      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5">
          <ul class="list-unstyled list-inline social text-center">
            <li class="list-inline-item"><a href="javascript:void();"><i class="fab fa-facebook"></i></a></li>
            <li class="list-inline-item"><a href="javascript:void();"><i class="fas fa-mobile-alt"></i></a></li>
            <li class="list-inline-item"><a href="javascript:void();"><i class="fas fa-envelope"></i></a></li>

          </ul>
        </div>
        </hr>
      </div>  
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
          <p>PC Handyman NZ - Small business / Home office IT solutions</p>
          <p class="h6">&copy All right Reversed.<a class="text-green ml-2" href="https://www.sunlimetech.com" target="_blank">PC Handyman 2018</a></p>
        </div>
        </hr>
      </div>  
    </div>
  </section>

Кажется, я не могу получить 3 иконки социальных сетей в моем нижнем колонтитуле, чтобы они оставались пропорциональными при изменении размера до размера мобильного устройства, я заставил их выглядеть идеально во всех больших размерах,

это выглядит искаженным согласно моей картине enter image description here

как мне заставить их выстроиться в линию?

Спасибо

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

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

@media only screen and (max-width: 600px) {
    #footer ul.social li{
      padding: 3px 1rem;
    }
}
0 голосов
/ 07 мая 2018

Я думаю, вам стоит взглянуть на flexbox. Здесь действительно хороший учебник

Я сделал фрагмент, который решает вашу проблему: 

footer{
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgb(250, 75, 83);
  width: 100%;
}
footer #icons{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer #icons i{
  font-size: 60px;
  font-style: normal;
  color: rgba(0,0,0,0.4);
  margin: 10px 30px;
}

@media (max-width: 520px){
  footer #icons{
    flex-direction: column;
  }
}
  <footer>
    <div id="icons">
      <i>☼</i>
      <i>☂</i>
      <i>☃</i>
    </div>
  </footer>

ура!

...