Решено помощь с CSS

[Vadimca]

Привет.
Сайт: voobsheto.net
Нужна помощь, чтобы убрать серую полосу справа на экране. Появляется только на телефонах, при том, на всех эмуляторах выглядит корректно. Никак не могу понять как исправить. Скриншот прикрепил.
Заранее спасибо =)

 

[Altin]

В хроме смотрели через панель разработчика? Там на iphone 6 видно, что есть серая полоска.

 

[Vadimca]

В хроме смотрели через панель разработчика? Там на iphone 6 видно, что есть серая полоска.

Да, Вы правы, теперь и я вижу.
В эмуляции Iphone 6 в хроме помогает следующее:

[CSS]@media screen and (max-width: 782px) {
.site-content {
float: left;
}
}[/CSS]

Но когда вставляю строчку в CSS, ничего не меняется.

 

[Wildcdu]

под разные экраны
[CSS]@media screen and (max-width: XXXpx) { }
@media screen and (min-width: XXXpx) { }
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { }
@media screen and (max-device-width: XXXpx) { }[/CSS]

Адаптивная
[CSS]@media screen and (max-width: 768px) { /* разрешение планшета */
h1 {
font-size: 20px;
}
div.image_gallery {
min-width: 320px;
}
img {
max-width: 48%; /* 2 изображения в ряд */
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
}[/CSS]
Адаптивная меньше экран
[CSS]@media screen and (max-width: 480px) { /* разрешение смартфона */
h1 {
min-width: 320px;
font-size: 16px;
}
div.image_gallery {
width: 320px;
min-width: 320px;
}
img {
max-width: 98%;
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
}[/CSS]

 

[Wildcdu]

Обязательно проверьте кодировку UTF-8 без BOM
этот код задает стиль без маржинга
[CSS]element.style {
margin: 0 !important;
}
body {
background: none repeat scroll 0 0 black;
text-align: center;
}[/CSS]

 

[Wildcdu]

По умолчанию iPhone Safari сжимает станицы, что бы вместить в экран. Следующий мета-тег говорит iPhone Safari использовать ширину устройства как ширину окна и отключить.
<meta name="viewport" content="width=device-width; initial-scale=1.0">

 

[Vadimca]

Спасибо за помощь. Сделал так, как Вы сказали. Проблема частично решилась, в том смысле, что полосы больше не видно (сначала). Дело в том, что на странице появилась ненужная прокрутка вправо-влево, благодаря которой и можно увидеть все ту же полосу. Скриншот прикрепил.

 

[Altin]

Не знаю, что вы там наделали, что появилась горизонтальная прокрутка - это не решение, а ненужный косяк.

Попробуйте из body убрать свойство фона background: #f5f5f5; в хроме полоса убралась. Конечно это неполное решение, потому что получается, что страница отображается не на всю ширину экрана. Но это лучше чем ничего.

 

[Wildcdu]

Спасибо за помощь. Сделал так, как Вы сказали. Проблема частично решилась, в том смысле, что полосы больше не видно (сначала). Дело в том, что на странице появилась ненужная прокрутка вправо-влево, благодаря которой и можно увидеть все ту же полосу. Скриншот прикрепил.
Посмотреть вложение 1253

Убрать скрол
[CSS]
body {
overflow-x:hidden;
overflow-y:scroll;
max-width:100%;
}
}[/CSS]
параметр overflow-x горизонтальная overflow-y вертикальная... так же есть параметры
overflow: auto | hidden | scroll | visible | inherit

 

[Vadimca]

Спасибо всем отписавшимся. Проблема была в виджете ВК, в котором криво было указано значение width, именно он "вылезал" за пределы темы и вызывал проблемы.