Проблема с адаптивностью сайта на БИТРИКСЕ?

Question

[Юлия Г]

Здравствуйте.
Есть сайт сделанный на Битрикс https://mosshar.ru
Гугл ругается что сайт не адаптирован под моб. устройства.
Было несколько проблем - сейчас остались 2 из них.-

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

Я знаю, что это распространенная ошибка и гугл часто ругается на это. Но вот решить пока это не получается. Много перечитала информации - но ни как

Плюс ещё один момент есть, с которым я ранее не сталкивалась (так как с битрикс работаю впервые) - сайт не адаптируется почему - то когда растягиваешь или сжимаешь экран, но если выбирать нужные размеры экрана и обновлять, то встает как надо всё - без скроллинга

Может среди Вас есть программисты, работающие с битрикс - подскажите, пожалуйста, с чем это связано и как решить данную проблему?
Заранее спасибо за помошь

Comments

[Юлия Г]

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

[Adamos]

Битрикс никакого отношения к проблеме не имеет.
У вас неграмотно сделан шаблон сайта, Битрикс никак на это повлиять не может.

[mirexdoors]

Это же вёрстка, cms не при чём

[Юлия Г]

Adamos, Я понимаю, что верстка сделана не грамотно. Заказчик так и сказал, что ранее сделанный адаптив смотрится как - то не корректно

[Юлия Г]

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

Answer 1

[Артем]

Как минимум для html указана ширина в 768px и container минимальная ширина - 768px, на которых адаптивность верстки заканчивается. Как итог - адаптива меньше 768px в ширину на вашем сайте не существует.
Гугл же тестирует для "стандартного" смартфона с шириной вьюпорта 375px. На котором и отображаются эти же 768px "впихнутые" в 375.

Comments

[Юлия Г]

Вчера я нашла и исправила ширину в 768px и container минимальная ширина - 768px - но это пока не особо помогло((( Хотя в мозиле уже не скроллит, да в и хроме тоже - но гугл всё равно продолжает ругаться на эти две ошибки

Answer 2

[Юлия Г]

Всем огромное спасибо за подсказки.
Проблема была в файле ROBOTS.TXT - в этом файле были заблокированы доступы к некоторым ресурсам, а точнее к css и js файлам. По этому гугл не видел стили.

Answer 3

[MyMac]

У вас указан

min-width: 768px !important;

у блока "container"
в
@media screen and (max-width: 1152px)
(файл /css/style.css шаблонов, строка примерно 4745)
нужно тогда исправить

@media only screen and (max-width: 768px)
.container {
    width: 100% !important;
}

на

@media only screen and (max-width: 768px)
.container {
    width: 100% !important;
    min-width: inherit!important;
}

там же но чуть ниже, ну либо убрать первое условие.