Цель: Мой веб-сайт выглядит нормально в широком окне просмотра. Но когда я моделирую мобильное представление, все идет не так, как должно быть. Один или несколько (?) Элементов во второй половине моей страницы растягивают свой контейнер до нежелательной ширины, в результате чего справа от элементов контейнера появляются пробелы. Я хочу, чтобы ширина (и содержимое) контейнера соответствовала области просмотра, как это уже делает верхний контейнер.

Ссылка: www.hermanvulkers.com

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

< Сильный > Иллюстрация :

Example of unwanted stretch

Желаемый результат: Я стремлюсь к отсутствию пробелов справа от контента и к странице, которая реагирует на мобильное окно просмотра должным образом.

Может ли кто-нибудь понять, откуда возникла проблема?

Заранее спасибо!

css
-1
Herman Vulkers 16 Ноя 2021 в 18:13
1
Пожалуйста, знайте, что на самом деле это не тот способ, которым вы должны здесь спрашивать, см. Что-то на моем веб-сайте или в моем проекте не работает . Могу я просто вставить на него ссылку?
 – 
CBroe
16 Ноя 2021 в 18:15
1
В поле ввода электронной почты в разделе информационного бюллетеня установлено значение width:300px, а родительский контейнер представляет собой гибкий элемент со строкой направления и без оболочки, заставляя кнопку «Подписаться» (которая имеет ширину около 115 пикселей) отображаться рядом с ним. ... 300 пикселей плюс 115 пикселей плюс дополнительное заполнение контейнера по 50 пикселей с каждой стороны, что все в сумме, действительно не вписывается в ширину экрана 375 пикселей слишком хорошо.
 – 
CBroe
16 Ноя 2021 в 18:24

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;
 }
}

Попробуйте эти медиа-запросы и при необходимости измените все вокруг.

1
Kameron 16 Ноя 2021 в 18:53
Это вообще поможет?
 – 
Kameron
17 Ноя 2021 в 06:24
1
Камерон, извините за поздний ответ. Это очень помогло. Я скорректировал свой веб-сайт с учетом ваших отзывов, теперь он намного лучше! Большое спасибо!
 – 
Herman Vulkers
20 Ноя 2021 в 17:02
1
Без проблем! Рад, что смог помочь, пожалуйста, подумайте о том, чтобы проголосовать за и принять этот ответ, чтобы помочь следующему человеку.
 – 
Kameron
20 Ноя 2021 в 19:59