Задать вопрос
jshikanova
@jshikanova
html

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

При масштабировании страницы (меньше ее ширины и больше ширины мобильной версии) страница "ломается", элементы съезжают как вы можете увидеть на скриншоте:
5b3228cccab63022714220.png
Решалась данная проблема с помощью фиксирования ширины контейнера:
.desktop .container {
max-width: 1170px !important;
width: 1170px !important;
min-width: 1170px !important;
}
Что вызывает следующую проблему, разобранную в вопросе Что делать при исчезновении фона на Bootstrap 4?
Если коротко, фиксирование ширины контейнера каким-то образом делают фон и фоновые изображения белыми (при том что все блоки остаются на своем месте)
5b322a3e8c4cb995158817.png
Есть ли другой способ (1) зафиксировать ширину контейнера, (2) избавиться от "съезжания" блоков или (3) устранить белый фон при прокрутке??
Веб-сайт
  • Вопрос задан
  • 507 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
solidcreature
@solidcreature
Развиваю сообщество WordPress в Москве
Общий ответ: использование Media Queries, т.е. в CSS вы прописываете отдельные правила для конкретного размера экрана. Например можно сделать текст логотипа поменьше, убрать или сузить строку поиска и т.д. для промежуточных разрешений, например c 768 до 1200 пикселей.

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

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

.search-bar {
 display: none
}
}


Данный пример условный, он лишь показывает направление мысли. Это вполне частая, что приходится манипулировать с элементами, если у вас кастомный дизайн, а не набор бутстраповских блоков.
Ответ написан
1 комментарий
1 комментарий
@luckyfox07
просто дать логотипу на одну колонку больше, а тексту меньше при адаптации.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Ещё заказы