Адаптивный сайт перестраивает сетку блоков под ширину экрана, а не показывает уменьшенную копию десктопной версии. Проверяется просто: открыть сайт на реальном телефоне, не в браузере на компьютере с суженным окном, и посмотреть, читается ли текст без масштабирования и попадает ли палец по кнопкам с первого раза.
Правильная верстка идет от мобильного экрана вверх, а не наоборот. Сначала собирается версия для узкого экрана 375-420 px, потом добавляются точки перелома для планшета около 768 px и десктопа от 1024 px. Если делать наоборот - сверстать под монитор и потом "сжимать" - получается именно то, что случилось у вас: элементы наезжают друг на друга, потому что блоки не переставлены, а просто уменьшены.
Несколько практических вещей, которые чаще всего ломаются на телефоне: кнопки меньше 44х44 px промахиваются пальцем, шрифт мельче 16 px в полях формы заставляет iPhone сам увеличивать масштаб при клике, а расстояние между кликабельными элементами меньше 8 px превращает навигацию в лотерею. Все три пункта стоит проверить руками на своем телефоне перед запуском.
У лендингов, которые я сдаю, обычно больше половины трафика приходит с телефонов, поэтому мобильная версия у меня не "довесок", а основная, под которую я и собираю макет с самого начала. Если у вас уже готовый конструкторский шаблон и просто едет верстка - иногда достаточно поправить пару блоков с фиксированной шириной вместо процентной, без полной переделки.