Невозможно определить, что приводит к тому, что главная страница веб-сайта становится слишком широкой при отображении на мобильном устройстве.

Question

Я создал веб-сайт https://www.reseth.nl, который отображает слишком большую ширину на домашней странице только на мобильных устройствах.

Я пытался найти ошибку, но не могу найти Это. Я даже сделал копию страницы http://www.reseth.nl/hometest, которая затем странным образом отображается правильно на мобильном телефоне.

Приложил два снимка экрана, которые показывают проблему: правильная ширина неправильная ширина

На значках социальных сетей в нижней части снимков экрана видно, что что-то вызывает слишком большую ширину. Но что!? Любая помощь будет очень принята!

Answer 1

Я посмотрел, и, похоже, это связано с этим css селектором:

.essb_links.essb_nospace.essb_width_columns_5 li a {
  width:100%;
}

Итак, в этом случае каждая социальная ссылка растягивает свой контейнер, чтобы заполнить экран.

Вы можете переопределить селектор с соответствующей шириной или исправить то, что вызвало 100% значение.

Answer 2

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

Answer 3

Ваши очень большие поля и отступы в ваших разделах вызывают эту проблему.

например, у вас

#content-block-background-1358 {
    margin: 0 -10000px;
    padding: 0 10000px;
}

#content-block-background-1055 {
    margin: 0 -10000px;
    padding: 0 10000px;
}

#content-block-background-1099 {
    margin: 0 -10000px;
    padding: 0 10000px;
}

#content-block-background-1755 {
    margin: 0 -10000px;
    padding: 0 10000px;
}

Использование таких полей и отступов вызывает эти проблемы. Это абсолютно хлопотно и не нужно.