Горизонтальная прокрутка на смартфоне
Autor: Pavel M.
Visitado 1582,
Followers 1,
Compartido 0
Опять начались проблемы с отображением сайта на смартфонах - сайт болтается вправо-влево, хотя никакие объекты в хэдере и футере за границы не выходят. Причем это наблюдается только на главной странице - вот сайт на временном домене http://shuby.avasiliev.ru/
Publicado en
это может быть не только в хедере или футере... было такое из за объекта... если вечером время будет посмотрю
Autor
в предыдущей версии такое было из-за заголовков в стиле объектов, причем заголовков любой длины. Сейчас заголовки к стилям не привязаны.
у меня было из за skill bar .. внутри контейнера блоки превышали ширину хотя отображались правильно...
не совсем понимаю зачем использовать сетку в 146 колонок? ищу дальше
ну вроед нашел у вас "фиксированная полоса" на 2px шире контента.... к примеру iphone 6 - 375px у вас же полоса 377px
Autor
Колонок в программе всего 12, я при всем желании не могу сделать больше) это уже программа чудит, обновленная так сказать версия.
Autor
Фиксированная полоса подчиняется заданным разрешениям, и на смартфонах она просто меньше 480. Тем более на других страницах всё нормально.
причем это не котент это именно ширина контейнера imStickyBarContainer
еще раз именно на главной странице контейнер imStickyBarContainer имеет ширину 377 когда должен 375 пикселей .... на других страницах он 375px поэтому там и не скачет....
вот вам для пробы : в свойствах страницы пишем код
.imStickyBarContainer {
width: 100vw !important;
overflow: hidden !important;
}
вроде после этого не должно плясать
надо им продемонстрировать их труды))))
по всей видимости программа почему то неправильно рассчитывает этот блок .... код проверил все должно заработать ... единственное забыл что его надо обернуть в <style> .... </style> но думаю вы знаете....
Autor
Завтра попробую поставить, тогда напишу)
Павел я не обратил внимание чем был imStickyBarContainer возможно вместо точки придется поставить # (в коде) сейчас не смогу посмотреть
Autor
Спасибо за помощь, но увы - сайт как болтался, так и болтается.
Вставлял варианты кода
<style>
#imStickyBarContainer {
width: 100vw !important;
overflow: hidden !important;
}</style>
и с точкой
<style>
#.StickyBarContainer {
width: 100vw !important;
overflow: hidden !important;
}</style>
Не помогает. К тому же видно, что контент сайта отступает больше, чем фиксированная полоса. Напишу закрытый пост, пусть разбираются.
Autor
с точкой без решетки был код, это издержки копирования)
вчера пробовал через инструменты разработчика : полоса стала как и должна быть... после выгрузки ctrl+f5 делали? или вы не выгружая через возможность в программе пробовали?
вечером скрины скину до кода и после...
Autor
Я на смартфоне даже историю браузера обнулял, поскольку там нет ctrl+f5)
четко вижу что при сдвиге сайта влево как раз 2px и вылезают. сделал скрин сайта программой получилось 754px в ширину ( из за ретина 754/2=377px )... код вставляли перед закрыв head в свойствах страницы?
Autor
Вставлял, перед закрывающим, бестолку.
Не проще ли пользоваться более стабильной WebSite X5 Professional 17.1.2, чем мучиться с пока еще очень сырой WebSite X5 Pro 2019.1.6?
правильный код:
<style>
#imStickyBarContainer {
width: 100vw !important;
overflow: hidden !important;
}
</style>
скрин до...
скрин после
Autor
Это всё теория. Я проверяю на реальном телефоне с андроидом, вот именно сейчас поставил ваш код, обновил полностью сайт на хостинге, обновил в браузере, результата ноль. Как двигался, так и двигается.
Autor
Всё оказалось проще) Погоня за красотой, использование точек вместо встроенного разделителя и присело к такому эффекту. Лечится либо вставкой разделителя, либо уменьшением количества точек. Подсказали разработчики, спасибо им)