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

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

  • автор:

Контент шире экрана

При проверке удобства просмотра сайта на мобильных устройствах часто возникает ошибка: Контент шире экрана! Из-за чего это происходит и как это исправить?

Очевидно, что ошибка связанна с тем, что на странице есть элемент, который выходит за область просмотра viewport.

Например, в инструменте от google-mobile-friendly по умолчанию используется ширина в 320 пикселей.

Рекомендация №1: использовать «резиновые» элементы

Сделать это можно, указав css свойство width:100% и/или max-width:100%

Это наиболее простое и очевидное решение, например:

Примечание :использование значения auto не даёт результата, т.к. оно задаёт автоматическое определение размеров исходного элемента и никак не влияет на его адаптацию.

Рекомендация №2: используйте обёртку для элементов с margin и padding

Следующий нюанс более сложный и менее очевидный. Он связан с особенностями интерпретации CSS-свойств margin и padding в браузерах. По сути, их значения добавляются к исходному размеру элемента.

Например, у нас есть элемент content-outer :

Для него задано:

В таком случае мы получим ширину: 100% + 10px + 10px (отступы в 10px слева и справа).

Одним из вариантов решения проблемы является использование CSS-свойства box-sizing со значением border-box , которое заставляет браузер учитывать ограничение, заданное родительским элементом. В нашем случае родительским элементом является тег body .

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

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

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

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

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

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

Есть подозрение, что проблема в какой-то особенности методологии проверки, про которую я не знаю. Скриншоты, которые снимает сервис с сайтов в момент тестирования, почему-то без CSS-стилей — просто разметка.

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

feniks79feniks79

До шапки еще не добралась, а вот с вк не получается((
Код сейчас выглядит вот так: <div style="max-width: 100%;"><!— Put this div tag to the place, where the Comments block will be —>
<div /> <script type="text/javascript">
VK.Widgets.Comments("vk_comments", );
</script>
<?php if ( have_comments() or comments_open() ) : ?>

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

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

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

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

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

Ваш адрес email не будет опубликован.