Добрый день.
как посмотреть, что можно изменить для корректного отображения
при просмотре в firefox (в режиме мобильного - для этого нажмите CTRL+SHIFT+M)
видно как сайт отображается на смартфонах с разрешением в 320px
чтобы узнать причину, почему тот или иной блок "не складывается" в мобильном нажмите на блок правой кнопкой мыши и выберите "исследовать элемент".
В появившемся инструментарии разработчика вы увидите, как ведет себя элемент верстки в данном разрешении. И так же увидите в каком файле css и на какой строке требуется внести изменения.
В этом же редакторе вы можете поиграться и изменять параметры без изменения CSS файлов (некая песочница), чтобы понять: к чему приведут изменения.
например элемент BODY обладает стилями на разрешении 320 (как показывает FireFox эти стили находятся в файле
roadto.alfaecology.ru/assets/theme/css/app.css в строке 38)
body {
color: #000;
font-family: 'GillSans';
max-width: 1280px;
margin: 0 auto;
font-size: 16px;
min-width: 940px;
}
что значит, что даже на разрешении 320 пикс у браузера BODY будет иметь min-width (минимальную ширину в 940px)
попробуйте в редакторе CSS-кода FireFox поиграться шириной этого тэга на нужных разрешениях и вы увидите результат.
И так далее следуйте по каждому блоку (и его родителям, в которые он упакован), который выходит за пределы требуемой ширины.
чтобы задать специальные условия в CSS для нестандартных разрешений упаковывайте специальные условия для того же тега BODY в CSS блок в конце CSS файла
@media screen and (max-width: 320px) {
body {
min-weight:320px;
}
}
Важно. Условие в 940px для больших разрешений удалять не требуется! Браузер поймет и отдаст приоритет тому разрешению, которое описано в параметре
@media screen 
