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

feniks79 feniks79  
88
  04.06.2016 11:03       9 077     Помощь  
Кто смог победить гугл насчет "Контент шире экрана"? Поделитесь, пожалуйста, как с этим справиться...

Ответы на пост (9) Написать ответ
metamarfoz metamarfoz
153
04.06.2016 14:27
У вас для #sidebar должно быть указано не margin-left:70%, а float:left. У вас же получается, что есть один блок с шириной 70%, потом есть блок с шириной 30%, и это блок отступает от первого блока аж на 70% экрана.
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран
0
Решение
feniks79 feniks79
88
04.06.2016 15:04
Спасибо большое! Поправила. А можно еще вопрос? Там теперь вроде все нормально, но нашла еще проблемы - оказывается, кусок шапки не вмещается и виджет комментов через вк торчит во всю длину, они вызывают необходимость в горизонтальной прокрутке при просмотре с мобильных. Нужного там уже ничего нет, но этого ведь роботам не докажешь... Причем блок комментов я и сразу уменьшала, при вставке, но на моб. версии он вылезает в максимальную длину(( Куда что можно вписать, чтобы их ограничить или сделать резиновыми? Сайт http://otdelkadom.tk/
0
metamarfoz metamarfoz
153
04.06.2016 11:40
Возьмите в привычку проставлять для всех дивов box-sizing:border-box;
Например где-то вы указали ширину блока 100%, потом еще padding и блок будет выходить за пределы экрана. Довольно частая ошибка, которую мне приходится у людей исправлять.
0
feniks79 feniks79
88
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;
Или еще где-то что-то не учтено?
0
feniks79 feniks79
88
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;
Или еще где-то что-то не учтено?
1
metamarfoz metamarfoz
153
04.06.2016 14:28
У вас для #sidebar должно быть указано не margin-left:70%, а float:left. У вас же получается, что есть один блок с шириной 70%, потом есть блок с шириной 30%, и это блок отступает от первого блока аж на 70% экрана.
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран
0
metamarfoz metamarfoz
153
04.06.2016 16:12
Логотип вставляйте не через CSS, а просто картинкой. и для нее пропишите свойство max-width: 100%;
Аналогично виджет вк вставляете в блок с прописанным свойством max-width: 100%;
Например: <div style="max-width: 100%;">ТУТ КОД ВИДЖЕТА</div>
0
feniks79 feniks79
88
04.06.2016 17:58
До шапки еще не добралась, а вот с вк не получается((
Код сейчас выглядит вот так: <div style="max-width: 100%;"><!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "400", attach: false});
</script>
<?php if ( have_comments() or comments_open() ) : ?>

<div id="comments"></div>
А результат такой: http://joxi.ru/BA09P96sBj4Npr
Может, что-то не так делаю? Хорошо в моб версии он только в случае, если ширину поставить 250, но такая клякса убого выглядит в нормальном варианте сайта...
0
Maks_Driver Maks_Driver
0
09.04.2019 12:49
Пытаюсь решить эту проблему уже несколько дней. Перепробовал, все что только можно, вплоть до того, что страница просто пустая была и все равно Гуугл и Яндекс выкидывают ошибки "Горизонтальная прокрутка возможна", "Контент шире страницы", "Элементы случком близко друг к другу".

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

https://www.clipartsfree.de/cl...

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