Навигационная панель превышает ширину страницы

Question

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

(вот картина проблема у меня)

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

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

Я загрузил сайт по адресу: http://ariellafreinders.co.uk/LGA/copy.html (так что если кто-то хотел бы взглянуть на код, они могут сделать это там.)

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

Надеюсь, что мой пост имеет смысл, спасибо за ваше время.

Answer 1

Проблема в том, что элемент #attraction_items шире его родительского элемента, заставляя страницу прокручивать по горизонтали.

Попробуйте это:

#attraction_items { 
    clear: both; 
    overflow: hidden; 
    /* margin-left: -12.5px; */ 
    /* margin-right: -12.5px; */ 
} 

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

Похоже, ваш бывший сотрудник пытается компенсировать наценки на дочерние элементы с классом col_tiles_1

.col_tiles_1, .col_tiles_2, .col_tiles_3, .col_tiles_4, .col_tiles_5, .col_tiles_6, .col_tiles_7, .col_tiles_8, .col_tiles_9, .col_tiles_10, .col_tiles_11, .col_tiles_12, .col_tiles_13, .col_tiles_14 { 
    background-color: #f5f5f5; 
    background-size: cover; 
    background-position: center; 
    position: relative; 
    height: 344px; 
    min-height: 1px; 
    margin-left: 12.5px; 
    margin-right: 12.5px; 
} 

Answer 2

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

Просьба прокрутить страницу вниз и найти любые вхождения в нее.

Быстрое исправление, которые я обычно использую в CSS:

* { 
    max-width: 100%; 
} 

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

Я пробовал применить этот css на вашей странице, и он исправил его. Исправление, однако, обычно не оценивается сообществом, поэтому я дам вам объяснение:

Причина в том, что у вас есть элементы, которые превышают, как уже упоминалось. Зачем?

Вашей набивка на титульных блоках добавляет дополнительную ширину, следует применять

box-sizing: border-box 

на это стиль. У вас есть какие-то элементы:

.col_tiles_1, 
.col_tiles_2, 
.col_tiles_3, 
.col_tiles_4, 
.col_tiles_5, 
.col_tiles_6, 
.col_tiles_7, 
.col_tiles_8, 
.col_tiles_9, 
.col_tiles_10, 
.col_tiles_11, 
.col_tiles_12, 
.col_tiles_13, 
.col_tiles_14 { 
    ... 
    margin-left: 12.5px; 
    margin-right: 12.5px; 
    ... 
} 

Это делает коробки добавить запас вправо, следовательно, делая пропуски.

Быстрое исправление будет атрибутом max-width, но это может быть не предпочтительнее для всех.

Я надеюсь, что это поможет, в противном случае сообщите мне, и я займу долг.

Answer 3

Вам просто нужно закомментировать отрицательные поля из пунктов притяжения. В main.css, изменить:

#attraction_items{ 
    clear: both; 
    overflow: hidden; 
    margin-left: -12.5px; 
    margin-right: -12.5px; 
} 

в

#attraction_items{ 
    clear: both; 
    overflow: hidden; 
    /*margin-left: -12.5px; 
    margin-right: -12.5px;*/ 
}