Цель: Мой веб-сайт выглядит нормально в широком окне просмотра. Но когда я моделирую мобильное представление, все идет не так, как должно быть. Один или несколько (?) Элементов во второй половине моей страницы растягивают свой контейнер до нежелательной ширины, в результате чего справа от элементов контейнера появляются пробелы. Я хочу, чтобы ширина (и содержимое) контейнера соответствовала области просмотра, как это уже делает верхний контейнер.
Ссылка: www.hermanvulkers.com
Предполагаемая проблема: Я подозреваю, что один из элементов, которые я обвел ниже, выходит за пределы области просмотра, в результате чего контейнер растягивается, а другие элементы идут вместе с ним? Я пытался решить эту проблему, но безуспешно.
< Сильный > Иллюстрация :
Желаемый результат: Я стремлюсь к отсутствию пробелов справа от контента и к странице, которая реагирует на мобильное окно просмотра должным образом.
Может ли кто-нибудь понять, откуда возникла проблема?
Заранее спасибо!
1 ответ
Это можно исправить с помощью media queries. Я заметил, что вы использовали много фиксированной ширины определенных элементов с px's, что является большим нет-нет при попытке создать адаптивный дизайн. У вас также были некоторые поля на определенных элементах, которые также сбивали с толку. Для медиа-запросов или адаптивного дизайна в целом я бы рекомендовал использовать %'s vw / vh или другие динамические блоки, которые меняются вместе с экраном.
@media only screen and (max-width: 850px) {
.flex-header a {
margin-right: 1rem;
}
.container {
max-width: 100%;
padding: 0;
}
input[type="email"] {
width: 100%;
}
a.post {
margin-right: 0;
}
}Попробуйте эти медиа-запросы и при необходимости измените все вокруг.
width:300px, а родительский контейнер представляет собой гибкий элемент со строкой направления и без оболочки, заставляя кнопку «Подписаться» (которая имеет ширину около 115 пикселей) отображаться рядом с ним. ... 300 пикселей плюс 115 пикселей плюс дополнительное заполнение контейнера по 50 пикселей с каждой стороны, что все в сумме, действительно не вписывается в ширину экрана 375 пикселей слишком хорошо.