Как сделать так, чтобы мои иконки социальных сетей отображались горизонтально на мобильном телефоне?

Question

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

Иконки социальных сетей отображаются горизонтально, без проблем в режиме рабочего стола.

Примечание. Я использую тот же CSS-код, который находится вне медиа-запроса, в медиа-запросе только для того, чтобы набрать обороты, но он вообще не работал.

Что я делаюнеправильно и как я могу это исправить?

Вот мой HTML-код:

<div class="container-fluid">
 <div class="socialIcons row">
    <div class="col-sm-1">
        <a href="#">
            <i class="fa fa-envelope"></i>
        </a>
    </div>
    <div class="col-sm-1">
        <a href="#">
            <i class="fab fa-youtube"></i>
        </a>
    </div>
    <div class="col-sm-1">
        <a href="#">
            <i class="fab fa-linkedin"></i>
        </a>
    </div>
</div>

Вот CSS:

@media only screen /* ----------- iPhone 6+, 7+ and 8+ ----------- */
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
 i.fa {
    font-size: 2.2em;
    width: 5.7em;
    text-align:center;
    margin-left: 43.5%;
}

i.fab {
    font-size: 2.2em;
    color: red;
    width: 5.7em;
    text-align:center;
    margin-left: 43.5%;
}

i.fa-linkedin {
    font-size: 2.2em;
    color: #0077B5;
    width: 5.7em;
    text-align:center;
    margin-left: 43.5%;
}
}

Answer 1

Ваша проблема в том, что классы Bootstrap, которые вы используете для горизонтального выравнивания, не предназначены для очень маленьких устройств, «col-sm-1» для (min-width: 576px) и верхних разрешений.

Я предполагаю, что вы используете Bootstrap 4, потому что они изменили класс для col-xs - *.

Попробуйте использовать "col-1" вместо того, который вы используете.