Контент шире экрана google как исправить
Перейти к содержимому

Контент шире экрана google как исправить

  • автор:

Контент шире экрана. Как исправить?

Сайт — txtforweb.ru
На некоторые страницы Гугл ругается — контент шире экрана, интерактивные элементы располагаются слишком близко друг к другу — как исправить? Визуально на мобильных отображается нормально.

Ответы на пост (3) Написать ответ
26.04.2018 17:50

Нет, не нормально: https://cdn1.savepice.ru/uploads/2018/4/26/9d4a38b9ef764faaf021b9205de221f1-full.jpg
Как исправить? Сверстать адаптивные страницы. В первую очередь обратить внимание на вёрстку таблиц. Но и в других элементах тоже есть проблемы. Тема как бы адаптивная, но с жуткими косяками.

29.04.2018 15:58

Удалось более-менее решить вашу проблему просто добавив:

@media screen and (max-width: 414px) .blok1, .blok2, .blok3, .blok4, .blok5 width: 100%;
>

input[type=»reset»], input[type=»button»], input[type=»submit»] margin-left: -55px;
>
>

Костыли, но проблему должны решить

11.05.2018 23:08
Чтобы убрать контент шире экрана: CSS для моб. устройств (вся @media) прописуете:
html, body

По близким элементам:
Пробуйте по очереди удалять или комментировать элементы на странице сайта и запускать на проверку в https://search.google.com/test/mobile-friendly , так вычислите, где нестыковка по адаптации сайта под моб. устройства. После этого проще найти ошибку.

Похожие посты

  • Контент шире экрана. как исправить?
    7
  • «Контент шире экрана» — вечная претензия от гугл
    9
  • Контент шире экрана ( жалоба гугла)
    3
  • Контент шире экрана — не могу понять в чем проблема
    16
  • Контент шире экрана проблема google
    3
Анализ сайта

Поможем улучшить ваш сайт.

«Контент шире экрана» — вечная претензия от гугл

feniks79

feniks79

04.06.2016 11:03 9 744
Кто смог победить гугл насчет «Контент шире экрана»? Поделитесь, пожалуйста, как с этим справиться.
Ответы на пост (9) Написать ответ
04.06.2016 14:27

У вас для #sidebar должно быть указано не margin-left:70%, а float:left. У вас же получается, что есть один блок с шириной 70%, потом есть блок с шириной 30%, и это блок отступает от первого блока аж на 70% экрана.
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран

04.06.2016 15:04

Спасибо большое! Поправила. А можно еще вопрос? Там теперь вроде все нормально, но нашла еще проблемы — оказывается, кусок шапки не вмещается и виджет комментов через вк торчит во всю длину, они вызывают необходимость в горизонтальной прокрутке при просмотре с мобильных. Нужного там уже ничего нет, но этого ведь роботам не докажешь. Причем блок комментов я и сразу уменьшала, при вставке, но на моб. версии он вылезает в максимальную длину(( Куда что можно вписать, чтобы их ограничить или сделать резиновыми? Сайт http://otdelkadom.tk/

04.06.2016 11:40

Возьмите в привычку проставлять для всех дивов box-sizing:border-box;
Например где-то вы указали ширину блока 100%, потом еще padding и блок будет выходить за пределы экрана. Довольно частая ошибка, которую мне приходится у людей исправлять.

04.06.2016 12:00

Извиняюсь за навязчивость, но можно немного подробнее? Посмотрела в css, вроде есть такое:
#content float: left;
width: 70%;
padding: 2em 2em 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
>
#sidebar margin-left: 70%;
width: 30%;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Или еще где-то что-то не учтено?

04.06.2016 12:00

Извиняюсь за навязчивость, но можно немного подробнее? Посмотрела в css, вроде есть такое:
#content float: left;
width: 70%;
padding: 2em 2em 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
>
#sidebar margin-left: 70%;
width: 30%;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Или еще где-то что-то не учтено?

04.06.2016 14:28

У вас для #sidebar должно быть указано не margin-left:70%, а float:left. У вас же получается, что есть один блок с шириной 70%, потом есть блок с шириной 30%, и это блок отступает от первого блока аж на 70% экрана.
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран

04.06.2016 16:12

Логотип вставляйте не через CSS, а просто картинкой. и для нее пропишите свойство max-width: 100%;
Аналогично виджет вк вставляете в блок с прописанным свойством max-width: 100%;
Например:

ТУТ КОД ВИДЖЕТА

04.06.2016 17:58

А результат такой: http://joxi.ru/BA09P96sBj4Npr
Может, что-то не так делаю? Хорошо в моб версии он только в случае, если ширину поставить 250, но такая клякса убого выглядит в нормальном варианте сайта.

09.04.2019 12:49

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

При чем проблема проявляется только на страницах детального просмотра графиков JoomGallery:

На всех остальных страницах Стартовая, Галерея, рубрики все ОК. В чем проблема?

Как исправить ошибки «Контент шире экрана», «Интерактивные элементы расположены слишком близко»?

В последнее время почти на всех моих сайтах при проверке на сервисе https://search.google.com/test/mobile-friendly у многих моих сайтов появились одинаковые ошибки «Контент шире экрана», «Интерактивные элементы расположены слишком близко». При этом тестирование верстки не дает никаких «зацепок», что конкретно не нравится сервису — страницы отображаются корректно, горизонтальных скролов нет, навигация удобная (межстрочные интервалы, отступы и т.п.). Есть подозрение, что проблема в какой-то особенности методологии проверки, про которую я не знаю. Скриншоты, которые снимает сервис с сайтов в момент тестирования, почему-то без CSS-стилей — просто разметка. Поделитесь, пожалуйста, опытом.

  • pagespeed-insights
  • google-search
  • google-services

Отслеживать
задан 19 ноя 2018 в 6:33
45 6 6 бронзовых знаков
– user220926
23 ноя 2018 в 14:30
Если возможно, то конкретизируйте ваш вопрос. В настоящее время это только абстрактная информация.
– user220926
23 ноя 2018 в 14:31

0

Сортировка: Сброс на вариант по умолчанию

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

  • pagespeed-insights
  • google-search
  • google-services
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8466

Контент шире экрана проблема google как решить?

5f7d761cdfea2901160309.jpeg

Добрый день. Думаю уже надоели вопросы про гугл и ошибку мобильной версии. Ребята это мой первый проект, я чайник пока еще в кодах не разбираюсь, не судите строго))) Делаю «проверка страницы на сайте» все оптимизированно, но гугл всякий раз плюется((( Посмотрите плиз в чем проблема?
https://xn--80aaadrsbqfc0agfedvwq7d.xn--p1ai/
человек вроде бы указал где проблема, но как ее исправить я не знаю и в этом ли проблема?

  • Вопрос задан более трёх лет назад
  • 381 просмотр

1 комментарий

Средний 1 комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *