У вас для #sidebar должно быть указано не margin-left:70%, а float:left. У вас же получается, что есть один блок с шириной 70%, потом есть блок с шириной 30%, и это блок отступает от первого блока аж на 70% экрана.
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран
Спасибо большое! Поправила. А можно еще вопрос? Там теперь вроде все нормально, но нашла еще проблемы - оказывается, кусок шапки не вмещается и виджет комментов через вк торчит во всю длину, они вызывают необходимость в горизонтальной прокрутке при просмотре с мобильных. Нужного там уже ничего нет, но этого ведь роботам не докажешь... Причем блок комментов я и сразу уменьшала, при вставке, но на моб. версии он вылезает в максимальную длину(( Куда что можно вписать, чтобы их ограничить или сделать резиновыми? Сайт http://otdelkadom.tk/
Возьмите в привычку проставлять для всех дивов box-sizing:border-box;
Например где-то вы указали ширину блока 100%, потом еще padding и блок будет выходить за пределы экрана. Довольно частая ошибка, которую мне приходится у людей исправлять.
Извиняюсь за навязчивость, но можно немного подробнее? Посмотрела в 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;
Или еще где-то что-то не учтено?
Извиняюсь за навязчивость, но можно немного подробнее? Посмотрела в 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;
Или еще где-то что-то не учтено?
У вас для #sidebar должно быть указано не margin-left:70%, а float:left. У вас же получается, что есть один блок с шириной 70%, потом есть блок с шириной 30%, и это блок отступает от первого блока аж на 70% экрана.
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран
Логотип вставляйте не через CSS, а просто картинкой. и для нее пропишите свойство max-width: 100%;
Аналогично виджет вк вставляете в блок с прописанным свойством max-width: 100%;
Например: <div style="max-width: 100%;">ТУТ КОД ВИДЖЕТА</div>
До шапки еще не добралась, а вот с вк не получается((
Код сейчас выглядит вот так: <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, но такая клякса убого выглядит в нормальном варианте сайта...
Пытаюсь решить эту проблему уже несколько дней. Перепробовал, все что только можно, вплоть до того, что страница просто пустая была и все равно Гуугл и Яндекс выкидывают ошибки "Горизонтальная прокрутка возможна", "Контент шире страницы", "Элементы случком близко друг к другу".
При чем проблема проявляется только на страницах детального просмотра графиков JoomGallery:
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран
Например где-то вы указали ширину блока 100%, потом еще padding и блок будет выходить за пределы экрана. Довольно частая ошибка, которую мне приходится у людей исправлять.
#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;
Или еще где-то что-то не учтено?
#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;
Или еще где-то что-то не учтено?
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран
Аналогично виджет вк вставляете в блок с прописанным свойством max-width: 100%;
Например: <div style="max-width: 100%;">ТУТ КОД ВИДЖЕТА</div>
Код сейчас выглядит вот так: <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, но такая клякса убого выглядит в нормальном варианте сайта...
При чем проблема проявляется только на страницах детального просмотра графиков JoomGallery:
https://www.clipartsfree.de/cl...
На всех остальных страницах Стартовая, Галерея, рубрики все ОК. В чем проблема?