Как предотвратить «ломание» страницы при изменении ее ширины в Bootstrap 4?

Question

[jshikanova]

При масштабировании страницы (меньше ее ширины и больше ширины мобильной версии) страница "ломается", элементы съезжают как вы можете увидеть на скриншоте:

Решалась данная проблема с помощью фиксирования ширины контейнера:
.desktop .container {
max-width: 1170px !important;
width: 1170px !important;
min-width: 1170px !important;
}
Что вызывает следующую проблему, разобранную в вопросе Что делать при исчезновении фона на Bootstrap 4?
Если коротко, фиксирование ширины контейнера каким-то образом делают фон и фоновые изображения белыми (при том что все блоки остаются на своем месте)

Есть ли другой способ (1) зафиксировать ширину контейнера, (2) избавиться от "съезжания" блоков или (3) устранить белый фон при прокрутке??
Веб-сайт

Answer 1

[Николай Миронов]

Общий ответ: использование Media Queries, т.е. в CSS вы прописываете отдельные правила для конкретного размера экрана. Например можно сделать текст логотипа поменьше, убрать или сузить строку поиска и т.д. для промежуточных разрешений, например c 768 до 1200 пикселей.

Выглядеть будет примерно так:

@media (min-width: 768px) and (max-width: 1200px) {
.logo {
 font-size: 14px
}

.search-bar {
 display: none
}
}

Данный пример условный, он лишь показывает направление мысли. Это вполне частая, что приходится манипулировать с элементами, если у вас кастомный дизайн, а не набор бутстраповских блоков.

Comments

[jshikanova]

Это хорошее решение, но слишком трудоемкое, прийдется чуть ли не каждую страницу править.
Неужели нет никакого способа зафиксировать контейнер без установления фиксированной ширины как здесь:
.desktop .container {
max-width: 1170px !important;
width: 1170px !important;
min-width: 1170px !important;
}
или исправить ошибку с исчезающим фоном?
Мне не нужно чтобы элементы полностью умещались на странице с меньшей шириной, а скорее чтобы они оставались на своих местах и при прокрутке адекватно отображались

Answer 2

[luckyfox07]

просто дать логотипу на одну колонку больше, а тексту меньше при адаптации.