Как сделать сайт адаптивным

Короткий ответ

Начните с мета-тега в head — без него телефон показывает страницу как уменьшенную копию десктопной:

<meta name="viewport" content="width=device-width, initial-scale=1">

Три правила основы

Ширину задают через max-width, а не width, картинки не вылезают за родителя, а размеры включают отступы:

<style>
  * { box-sizing: border-box; }
  .container { max-width: 600px; margin: 0 auto; padding: 0 16px; }
  img { max-width: 100%; height: auto; }
</style>
 
<div class="container">
  <h2>Our story</h2>
  <img src="/media/photo-800x500.jpg" alt="">
</div>

Картинка шириной 800px здесь сжимается до ширины контейнера, а сам контейнер — до ширины экрана.

Раскладка под экран

Дальше раскладка: гибкие сетки на flexbox и grid, а где нужно перестроение — медиазапросы. Удобно сначала верстать для телефона, а потом добавлять колонки для широких экранов через min-width.

Частая ошибка

Фиксированные ширины вроде width: 960px — главная причина горизонтальной прокрутки на телефоне. Одна такая таблица или картинка ломает всю страницу. Ищите их, когда страница «уезжает» вбок: в инструментах разработчика это быстро видно в режиме эмуляции устройства.