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

#html #css #layout

#HTML #css #расположение

Вопрос:

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

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

Значки имеют формат svg.

Правильное расположение

Нарушенный макет

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

 #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. Здравствуйте. Когда я копирую ваш код в snippet как есть, ваши значки всегда располагаются горизонтально при любом размере дисплея. Как повторить вашу проблему?

2. Спасибо за вашу помощь — я думаю, что какой-то код ниже в нижнем колонтитуле, должно быть, выбросил его. Теперь это работает.

Ответ №1:

Я бы добавил это в 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>

1. Я думал, что flex-direction работает только с display: flex . Не могли бы вы создать резервную копию вашего решения с помощью демонстрационного рабочего фрагмента?

2. Извините, я новичок на веб-сайте, поэтому не уверен, как создать фрагмент, но в w3schools есть хорошая разбивка свойства flex-direction вот ссылка link

3. Есть значок, на котором есть символ <>. Вы можете создать фрагмент, используя это.

4. извините, приятель, я пытался добавить фрагмент для вас, но не думаю, что это сработало? я также добавил случайные изображения, просто чтобы показать, что это работает. Если вы попробуете этот код, он должен сработать, я протестировал его на этом веб-сайте, ссылка

5. Я изменил ваш код на фрагмент. В вашем новом коде есть display: flex который переопределяет display: inline . Итак, мой первый вопрос больше не актуален.