Адаптивность держится на трёх вещах: резиновые единицы вместо фиксированных пикселей - проценты, rem, vw, flexbox или grid вместо position и ширины в px, и media queries для смены раскладки на узких экранах. Если ширина блоков задана в px и они не сжимаются, на телефоне это и даёт наезд друг на друга.
Пишите стили сначала под мобильный экран - ширина до 600 px, а потом добавляйте media queries с min-width для планшета - около 768 px, и десктопа - от 1024 px, которые расширяют раскладку. Это проще, чем идти от десктопа вниз: не приходится каждый раз отменять десктопные стили правилами с max-width.
Частые причины наезда блоков - это картинки без max-width: 100%, фиксированная ширина контейнера вместо max-width, и текст с постоянным font-size без адаптации под маленький экран. Проверяйте не в браузере на компьютере с изменённым размером окна, а в инструментах разработчика на реальных ширинах: 375, 768, 1440 px.
Если верстка руками занимает больше времени, чем рассчитывали, - это нормально: адаптив с нуля на flexbox или grid у новичка обычно съедает половину времени всей работы над лендингом. Я использую готовый набор проверенных компонентов под свои проекты, поэтому у меня на верстку и адаптив уходит меньше дня.