CSS - расположение иконок меняется с горизонтального на вертикальное с изменением размера экрана - PullRequest
Новая
       17

CSS - расположение иконок меняется с горизонтального на вертикальное с изменением размера экрана

0 голосов
/ 21 марта 2019

У меня проблема при изменении размера экрана (на другое устройство или область просмотра) с некоторыми значками.

Когда размер экрана падает до 960 и ниже, значки меняются с горизонтальной ориентации на вертикальную. У меня есть точки останова в моем css для @ media, но ничего не меняется на 960 для socialIcons или связанных с ними div выше.

Иконки svg.

Правильный макет

enter image description here

Разбитый макет enter image description here

Фрагмент кода 

#social_block {
    margin: 0 auto;
    text-align: center;
    padding-top: 5rem;
    font-weight: bold;
}
#socialDisplay {
    width: 100%;
    padding-bottom: 1rem;
}
.socialIcons {
    width: 100%;
    display: inline;
}


<div id="social_block">

<div id="socialDisplay">CONNECT WITH US</div>


<div class="socialIcons">
<img class="link_item" id="FB" src="/xxx" rel="https://www.facebook.com/xxx/" data-method="open"> 
<img class="link_item" id="IG" src="/xxx" rel="https://www.instagram.com/xxx/" data-method="open"> 
<img class="link_item" id="LI" src="/xxx" rel="https://www.linkedin.com/company/xxx" data-method="open">
</div>

</div>

1 Ответ

0 голосов
/ 21 марта 2019

Я бы добавил это в социальные иконки CSS 

#social_block {
  margin: 0 auto;
  text-align: center;
  padding-top: 5rem;
  font-weight: bold;
}

#socialDisplay {
  width: 100%;
  padding-bottom: 1rem;
}

.socialIcons {
  width: 100%;
  display: inline;
  display: flex;
  flex-direction: row;
}
<div id="social_block">

  <div id="socialDisplay">CONNECT WITH US</div>


  <div class="socialIcons">
    <img class="link_item" id="FB" src="https://i.stack.imgur.com/dtPNz.png" rel="https://www.facebook.com/xxx/" data-method="open">
    <img class="link_item" id="IG" src="https://i.stack.imgur.com/dtPNz.png" rel="https://www.instagram.com/xxx/" data-method="open">
    <img class="link_item" id="LI" src="https://i.stack.imgur.com/dtPNz.png" rel="https://www.linkedin.com/company/xxx" data-method="open">
  </div>

</div>
...