Почему сайт не проходит проверку на адаптивность?

Рейтинг: 0Ответов: 1Опубликовано: 31.03.2015

Делаю сайт на Joomla 3 шаблон Yoo Nite. Сам шаблон адаптивный. Но, сайт не проходит проверку на https://www.google.com/webmasters/tools/mobile-friendly/. В каком направлении искать решение?

Ссылка на сайт http://gaboarchitects.storno.com.ua/

Ответы

▲ 1Принят

Обратите внимание на блоки .tm-nite-icons > li и картинки внутри .tm-nite-icons.
Для блоков у вас задана фиксированная ширина 282px. На мобильном разрешении (равном 320px по ширине), эти блоки выходят за границы экрана и появляется горизонтальная полоса прокрутки.

Исправить можно так:

.tm-nite-icons > li {
    max-width: 282px;
    width: auto;
}

Картинки у вас тоже выпадают из ссылки, в которую они обернуты. Все потому, что у вас для ссылки жестко заданы и ширина, и высота. Вы пытаетесь вписать по ширине картинку внутрь ссылки и автоматически вычислить высоту, сохраняя пропорции, но в этом случае пропорции картинок таковы, что подсчитанная высота больше высоты родительского блока. В вашем случае иконки лучше вписывать по высоте. Если не менять верстку, то решение таково:

.tm-nite-icons img {
    height: 100%;
    max-width: auto;
}

Как альтернативный вариант можно использовать (и я бы советовал так и сделать) свойство background-image и background-size для ссылки и полностью избавиться от вложенных картинок.

Кроме того, при наведении ваши иконки масштабируются и залезают на следующий за ними заголовок h1, частично перекрывая его. К слову, h1 должен быть один на странице.

Еще обратите внимание на слайдер в самом низу. Мало того, что на маленьком разрешении ваши 5 картинок в ряд выглядят слишком мелкими, так и кнопки управления (вперед/назад) сильно смещены вниз, перекрывая нижний край контейнера со слайдами.

Подобных недочетов на сайте довольно много и все их описывать здесь смысла нет.
Я рекомендую вам разбить сайт на логические блоки (шапка/слайдер/иконки/карусель/подвал) и заниматься отладкой каждого из них по отдельности, проверяя промежуточный результат упомянутым вами инструментом от Google.

Ну и напоследок рекомендую вам перепроверить выезжающее слева меню в мобильном отображении. Оно не закрывает экран на 100%.