Прохождение теста на мобильную адаптивность в теме Atlas

[monarch]

Добрый день!

Пытаемся вычислить причину непрохождения теста на мобильную адаптивность в Google Search Console.
Тема Atlas, версия 1.32.1 (на примере демки).

1. Ошибка Content wider than screen.
Проявляется, вероятно, если сузить окно до 1036 пикселей и чуть меньше, то появляется горизонтальный скроллер.
https://demo-free-ru.open-real-estate.info/

screen.jpg (221.53 КБ) Просмотров: 9264

Первоначально грешили на куки-бар, но он не причем.
Вероятно, виновник - какой-то div (его св-ва).
2. Ошибка Слишком мелкий шрифт
В ряде элементов шрифт слишком мал. Тут тоже куки-бар и основной текст.
Там где сам и объявления - текст нормального размера.

size.jpg (215.2 КБ) Просмотров: 9264

3. Ошибка Интерактивные элементы расположены слишком близко
Есть подозрение, что эта ошибка связана с 3 иконками выбора показа объявлений, которые расположены очень близко. Можно попробовать чуть увеличить отступ.
И в оверлее появляется линк "Наверх", возможно тоже считается гуглом за "интерактивный элемент".

[Foton]

По поводу п.1
В файле themes/atlas/css/style.css
замените

Код: Выделить всё

#footer-links .wrapper .footer_links_block {
    padding: 20px 0 0 0;
}


на

Код: Выделить всё

#footer-links .wrapper .footer_links_block {
    padding: 20px 0 0 0;
    overflow: hidden;
}


в файле themes/atlas/css/media-queries.css
замените

Код: Выделить всё

.title {
        display: inline-block;
        float: none !important;
        margin: 5px auto 20px auto !important;
        text-align: center;
        width: 100%;
    }


на

Код: Выделить всё

.title {
        display: inline-block;
        float: none !important;
        margin: 5px auto 20px auto !important;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }


и

Код: Выделить всё

@media screen and (max-width: 960px)


на

Код: Выделить всё

@media screen and (max-width: 981px)


Пункты 2 и 3 я считаю всё таки больше элементами дизайна.

[monarch]

По поводу п.1

Пункты 2 и 3 я считаю всё таки больше элементами дизайна.

Пункт 1 Content wider than screen. - успешно прошёл проверку в GSC (без внесения поправок).
Но поправки внесём все равно.

Пункт 2. Слишком мелкий текст, особенно хорошо почему-то видно на планшетах, адаптивность есть, но шрифт мелкий.
На мобильном вроде ещё нормально, но не на планшетах.

Пункт 3. Дизайн да, но как вариант выложить где-то дефолтное состояние шаблона Атлас и внося поправки, либо убирая элементы, добиться прохождения теста на отсутствие этих "Слишком близко". Скорее всего это либо Наверх, либо что-то из этой серии. Сами блоки достаточно далеко друг от друга.

Тут цепочка такая, что:
шаблон не проходит тесты у гугла => гугл чутка занижает оценки => меньше траффика у владельца сайта => он не развивается с нужной скоростью => не так быстро докупает доп.модули :)

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