Обратите внимание на блоки .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%.