На мобильном телефоне появилась горизонтальная прокрутка

Question

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

На моем веб-сайте у меня внезапно появился горизонтальный прокрутка появляется на мобильном телефоне (чего НЕ было раньше, и для этого не было отредактировано CSS).

Помимо проверки на моем телефоне, я также проверяю через эмулятор @ http://mobiletest.me/ (вроде на планшетах тоже есть). Кто-нибудь знает, как это исправить?

Не уверен, что какой-то плагин или тема WP странно работают с новой версией WP, но в основном это содержимое файла CSS (он довольно большой).

https://justpaste.it/8v9yy (должно быть легко доступно для поиска и чтения). Хотел положить сюда, но места не хватает.

Спасибо!

Answer 1

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

body, html {
    overflow-x: hidden;
    max-width: 100%;
}

Примечание: Если элементы внутри страницы переполнены, они будут обрезаны. Итак, вы должны убедиться, что они не переполняются, выполнив что-то вроде ниже:

.innner-element {
max-width: 100%; /* Ensures that it doesn't extend beyond its parent */
}

Answer 2

Обновление: После просмотра и тестирования CSS, похоже, что веб-сайт ведет себя так, как вы хотите, когда вы вносите следующие изменения:

@media screen and (min-width: 320px) { /* do the same thing for (min-width: 480px) */
    .typology-section {
        /* this makes all the text fit in the view */
        width: 80%; 

        /* the ad is wide, so this cuts it off at a certain point so no need to scroll */
        overflow-x: hidden; 
    }
}

I выяснил это, используя инструменты разработчика Firefox, чтобы выбрать элемент (ctrl + shift + c, когда вы находитесь на панели Inspect Element), а именно тот, который выходит из представления, щелкая по нему и редактируя CSS на этой панели, чтобы найти причину проблемы.

Исходный ответ

Я попробовал, и это похоже на объявление вверху страницы это то, что занимает много места по горизонтали и заставляет горизонтальную полосу прокрутки. Можете ли вы попробовать манипулировать объявлением с помощью CSS? Если это так, я бы сделал что-то вроде этого:

@media screen and (min-width: 350px) { //350-400px is roughly the width of most phones
    .advertisement {
        max-width: 300px;
    }
}

Это делает так, что, когда экран имеет определенную ширину, максимальная ширина применяется к объявлению.

Кстати , если вы используете Chrome, вы можете увидеть мобильное представление, открыв «Проверить элемент» (ctrl + shift + i), а затем переключив панель инструментов устройства (ctrl + shift + m). Просто хотел добавить это туда, чтобы облегчить работу по проверке мобильного просмотра!