Не понимаю переполнения Thedailyprophet.net
Я не понимаю, почему сайт переполняется на мобильных устройствах. Я добавил следующий код, но безрезультатно.
Веб-сайт www.thedailyprophet.net — я просмотрел несколько решений и подобных статей. Кажется, я не могу сосредоточиться на том, что здесь происходит, и, если не считать найма разработчика, это мое следующее решение.
заранее спасибо
html {
max-width: 100% !Important; }
body {
overflow-x: hidden !Important;
margin: 0px !Important;
padding: 0px !Important;}
Должен ли я размещать весь html в исходном коде страницы? Я не понимаю, что вы имеете в виду, иначе. Я не знаю, что вызывает проблему в HTML/CSS. Я знаю, что это проблема на веб-сайте, но я не могу экстраполировать часть кода, о которой вы спрашиваете, потому что я не знаю, что ее вызывает :(
Не весь исходный код страницы; достаточно, чтобы воспроизвести проблему. Если вы не уверены, вам нужно начать с исходного кода страницы, постепенно удаляя разделы, пока вы не доберетесь до наименьшего количества кода («минимальная» часть MCVE), который может воспроизвести проблему. В большинстве случаев этот процесс поможет вам найти проблему самостоятельно.
Ответы 1
Во-первых, очень крутой сайт!!
Хорошо, у вас есть один второстепенный и один главный виновник, которого я вижу...
В основной .container класс нужно:
overflow: hidden
Я считаю, что этот главный виновник связан с крутой анимацией, которую вы имеете в заголовках страниц и сообщений, где отдельные буквы заголовка добираются до места своего последнего упокоения, где заголовок можно прочитать. Буквы анимируются от просмотра страницы до конечного места, а область просмотра на мобильных устройствах прокручивается горизонтально, потому что непрозрачность букв делает их видимыми, пока они все еще находятся за пределами ширины сайта. Если вы добавите правило overflow: hidden к элементу контейнера, полоса прокрутки исчезнет (почти полностью, продолжайте читать)...
Второстепенный виновник — меню .menu-the-daily-prophet-header-menu. Имеет маржу ПЛЮС ширину 100% ... уберите маржу слева и справа, и все должно быть хорошо.
Чувак, ты крут! Спасибо за похвалу на сайте. Я потратил 100-200 часов на этот дизайн, и у меня глаза разбегаются. Ваше решение сработало. Могу я спросить, как вы определили это, чтобы я знал в будущем? Я никогда раньше не использовал эффект, как на этом сайте для писем, и я немного новичок в JS. Спасибо еще раз!
Проверил сайт в режиме устройства, выбрал случайный мобильный профиль (iPhone 5/6). Я прокрутил сайт до упора вправо, где мог видеть только самый правый край сайта и лишнее пустое пространство. Затем я прокрутил страницу вниз, наведя курсор на каждый контейнер и содержащиеся в нем элементы на панели «Элементы», выделив их контуры в окне просмотра. Проблема с меню была незаметна, но только после пары обновлений я заметил эти анимированные заголовки в пустом белом пространстве. Моя догадка была переполнена, что я подтвердил, добавив это правило в инспекторе и вуаля! Рад помочь!
Привет, и добро пожаловать на сайт. Пожалуйста, включите минимальный воспроизводимый пример в вопрос; вы добавили немного CSS, и это здорово, но нам нужно увидеть достаточно HTML и CSS в вопросе, чтобы воспроизвести проблему. В противном случае этот вопрос рискует остаться без ответа или быть закрытым.