Адаптивную вёрстку строят от узкого экрана к широкому, а не наоборот: сначала CSS пишется под ширину 360-390 пикселей, и только потом медиазапросами добавляется раскладка для планшета и десктопа. Судя по описанию, у вас обратный порядок - макет продуман для широкого экрана, а телефон получает то же самое сжатым, отсюда и наезды блоков.
Три вещи, которые чаще всего чинят такую вёрстку. Первое - относительные единицы вместо фиксированных пикселей для ширины блоков: проценты, rem, vw вместо жёстких px, чтобы контент сжимался вместе с экраном, а не упирался в него. Второе - flexbox или grid с переносом строк (flex-wrap, grid-template-columns через auto-fit), тогда колонки сами складываются в столбик на узком экране без ручной подгонки под каждое устройство. Третье - тег `<meta name="viewport" content="width=device-width, initial-scale=1">` в head: без него мобильный браузер отрисовывает страницу в виртуальном окне шириной около 980 пикселей и потом сжимает всё до размера экрана, из-за этого текст и мелчает, и обрезается непредсказуемо.
По брейкпоинтам рабочий ориентир такой: до 480 пикселей - один столбец, 481-768 - два, 769-1024 - два-три с появлением боковых колонок, от 1025 - три-четыре колонки внутри контейнера шириной 1100-1200 пикселей, а не растянутых на весь экран. Точные значения подбираются по содержимому: переключать раскладку нужно там, где текущая версия реально перестаёт выглядеть аккуратно, а не на круглых цифрах вроде 768.
Отдельно проверьте зоны нажатия: минимум 44 на 44 пикселя для кнопок и ссылок, иначе палец промахивается мимо на реальном телефоне, хотя в браузерном эмуляторе всё выглядит нормально. Финальная проверка всегда на настоящем устройстве через мобильный интернет, а не в режиме эмуляции на компьютере - эмулятор не покажет ни реальную скорость подгрузки, ни поведение клавиатуры при заполнении формы.