Не адаптируется блок логотипов на телефон, почему?

Question

[Екатерина Ивасенко]

Проблема такая, у меня 8 svg логотипов, я использую бутстрап 4 и всё лежит в одной строке ( а строка в контейнере, а он в секции, т е всё по правилам вроде как )
На десктопе они стоят:
3 3 3 3
3 3 3 3
На планшете так:
4 4 4
4 4 4
А на телефоне должны:
6 6
6 6
Но никак на xs-разрешение не выходит адаптировать!
Перекрутила код, как только могла, решение так и не находится :(

Сам код для примера:

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
        <div class="logo1"></div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
        <div class="logo2"></div>
      </div>
       /*и так же ещё 3 раза; logo(3,4,5,....)*/
  </div>
</div>

.logo1{
  background: url(../image.svg) no-repeat center;
    height: 40px;
    width: 120px;
}
.logo2{
/*другой юрл*/
}

Это скрины как оно ломается на телефоне:
Для компьтеров
Для планшетов
Для телефонов

Такая же проблема в другом месте, и тоже не адаптируются элементы на телефоне

Спасибо!

Comments

[wisgest]

Чем не устраивает просто вывести .logo1, .logo2… в ряд, указав для них display: inline-block;?

[Екатерина Ивасенко]

wisgest, ого, я попробую так сделать!
джун джуном, дурак дураком))0))0))00)

Answer 1

[Игорь]

в Bootstrap нету XS, это и так по умолчанию. Плюс ко всему нет смысла указывать col-md-4 и col-sm-4, Bootstrap обрабатывается от меньшего разрешения к большему, по этому правила там не "От и ДО", а только "от".
то есть
.col- <576px
.col-sm- ≥576px
.col-md- ≥768px
.col-lg- ≥992px
.col-xl- ≥1200px
а так как в CSS если несколько правил для одного компонента, применяются те что написаны последними, то .col-sm- переопределит .col-, .col-md- переопределит .col-sm- и так далее
исправьте на это, и отпишитесь
<div class=" col-6 col-sm-4 col-lg-3">

Comments

[Екатерина Ивасенко]

вау, спасибо!
это окей, если я от большего к меньшему иду или так не правильно?

[Игорь]

Екатерина Ивасенко, Нет разницы порядок указания классов в атрибуте HTML элемента. Порядок учитывается только в CSS файле. Я так указал просто потому что я перфекционист и мне так больше нравится эстетически.
Пример.
<div class="class1 class2"></div>

.class2 {
  background: red;
}

.class1 {
  background: blue;
}

класс class1 переопределит class2 потому, что он указан после class2 в CSS файле. Хотя в аттрибуте я указал его последним class="class1 class2"
надеюсь вы понимаете, и я вас не запутал

[Екатерина Ивасенко]

loonny, спасибо огромное!