How to make a website responsive?

Using flexible grids (Flexbox, Grid), media queries to change styles on different screen resolutions, relative units of measurement (%, rem, em, vw, vh), and flexible images (max-width: 100%; height: auto;).

/* Media query for screens up to 768px wide */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Change navigation to vertical */
  }
}

<img src="image.jpg" alt="Adaptive image" style="max-width: 100%; height: auto;">

By applying these approaches, page elements will automatically adapt to various device screen sizes.